В Electron по умолчанию главная страница приложения загружается при создании нового окна. Это происходит из-за того, что в функции `createWindow` вызывается метод `loadURL`, который загружает URL-адрес главной страницы приложения.
Чтобы создать новое окно и загрузить в него компонент React, вам нужно сделать следующее:
1. Установите зависимости `electron-is-dev` и `react-devtools`, если они еще не установлены:
```
npm install electron-is-dev react-devtools
```
2. В файле `main.js` (или `index.js`, где у вас находится главный процесс) измените функцию `createWindow` следующим образом:
```javascript
const isDev = require('electron-is-dev');
// ...
function createWindow() {
// Создайте новое окно браузера
const mainWindow = new BrowserWindow({
// настройки окна
});
// Загрузите URL-адрес, если это продакшн, или localhost с портом 3000, если это разработка
const url = isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`;
mainWindow.loadURL(url);
// Опционально: вызовите следующий код, чтобы открыть devtools
if (isDev) {
mainWindow.webContents.openDevTools();
}
// ...
}
```
3. Затем в вашем компоненте React, откуда вы вызываете функцию `createWindow`, вы должны использовать IPC для отправки сообщения в главный процесс с требуемым компонентом для загрузки в новое окно. Ваш компонент может выглядеть примерно так:
```javascript
const { ipcRenderer } = window.require('electron');
// ...
const handleOpenNewWindow = () => {
ipcRenderer.send('open-new-window', '<путь к вашему компоненту>');
};
// ...
<button onClick={handleOpenNewWindow}>Открыть новое окно</button>
```
4. В файле `main.js` добавьте следующий код после создания окна для отлова IPC-сообщения и загрузки требуемого компонента:
```javascript
ipcMain.on('open-new-window', (event, componentPath) => {
const newWindow = new BrowserWindow({
// настройки нового окна
});
const url = `file://${path.join(__dirname, '../build/index.html')}#${componentPath}`;
newWindow.loadURL(url);
});
```
После выполнения этих шагов, при клике на кнопку "Открыть новое окно" вызывается функция `handleOpenNewWindow`, которая отправляет IPC-сообщение в главный процесс. Главный процесс прослушивает сообщения `open-new-window`, создает новое окно и загружает компонент React, указанный в сообщении, вместо главной страницы приложения.