电子新窗口答案

【问题标题】：Electron new window电子新窗口
【发布时间】：2020-06-15 08:45:41
【问题描述】：

我正在尝试打开一个包含特定路线的新窗口，但似乎没有正确加载路线页面。新的电子窗口是从 FrmApprovalMain.js 打开的，新窗口应该用 FrmPOdet.js 打开但是，当它打开时，出现一个错误，似乎源于调用文件（FrmApprovalMain.js），但没有什么打开新窗口后，请处理... mainWINdow 很好，但是新打开的窗口会引发错误（FrmPOdet.js 上只有一个按钮）。

这是我在新窗口中遇到的错误（mainWindow 没有错误）：

    Module../src/FrmApprovalMain.js
G:/Electron/poa/src/FrmApprovalMain.js:10
   7 | import NumberFormat from 'react-number-format';
   8 | import ModalMessage from './componentAPI/ModalMessage'
   9 | import SpinnerCentre from './componentAPI/SpinnerCentre'
> 10 | const electron = window.require('electron');
  11 | const ipcRenderer = electron.ipcRenderer;
  12 | 
  13 |

，这些是我在应用程序中的声明：

声明打开一个新窗口（FrmApprovalMain.js）

  const electron = window.require('electron');
    const ipcRenderer = electron.ipcRenderer;
[...]
     openPO(){
        console.log("Open new window")
        ipcRenderer.send('openNewPO', "S");
        console.log("New Window Opened")
      }

在电子中，我创建了一个新的 IPC 侦听器，并在其中创建了新窗口：

ipcMain.on('openNewPO',(events,args) =>{
  const win = new BrowserWindow({
    parent: mainWindow,
    height: 600,
    width: 800, 
    show: true, 
  });
  win.removeMenu();
  win.loadURL("http://localhost:3000/podet");
});

路由器是这个

import App from './App'; 
import FrmPODet from './FrmPODet'

    const Router = () => (
        <HashRouter>
            <Switch>
                <Route exact path = "/podet" component = {FrmPODet} />
                <Route exact path = "/" component = {App} />

            </Switch>
        </HashRouter>
    );

FrmPODet 有一个按钮

【问题讨论】：

你能附上你的主js吗？
stackoverflow.com/questions/59681069/…
stackoverflow.com/questions/60227586/…
也许这就是您要找的东西？ ;)
我在窗口中添加了节点集成，它不再出现错误，但它仍在加载主窗口，它没有加载我想要的路由。（我最初没有添加 nodeIntegration 选项，因为我想要的路线不包含对 elecron 的任何引用）。所以问题是我的路由器没有加载，而不是../podet，它加载了主../

标签： reactjs electron

【解决方案1】：

终于解决了，问题出在HashRouter vs BrowserRouter的使用上。 HasRouter 适用于客户端应用程序（生产），但在开发中不起作用（开发时的服务器端方法），因此我不得不使用不同的语句进行开发和生产。

我的 Router.js 现在看起来像这样：

const Router = () => {
    if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development'){
        return (
            <BrowserRouter>
                <Switch>
                    <Route exact path = "/" component = {App} />
                    <Route exact path = "/Podet" component = {FrmPODet} />
                </Switch>
            </BrowserRouter>)
    } else {
        return (
            <HashRouter>
                <Switch>
                    <Route exact path = "/" component = {App} />
                    <Route exact path = "/Podet" component = {FrmPODet} />
                </Switch>
            </HashRouter>)
    }
};

我的 loadURL 是：

  win.loadURL(
        isDev
        ? "http://localhost:3000/Podet"
        : `file://${path.join(__dirname, "../build/index.html#Podet")}`
    );

【讨论】：