Electron React 应用程序路由在生产中返回空白页面

Question

嘿，我终于完成了我的反应电子应用程序，它在开发中运行良好，但是，当我单击主屏幕上的按钮将我引导到不同的页面时，它会返回空白页面。

尝试的解决方案

• 我确实使用 HashRouter 而不是普通的 Router
• 尝试在 file://${path.join(__dirname, "../build/index.html# ")}

问题 基本上，路线“/”处的主菜单显示，backgroundProcess窗口也显示，但是当我单击按钮将我定向到/慢或/快等时，它会返回一个空白页面

我的窗口在main.js文件中：

mainWindow.loadURL(isDev ? "http://localhost:3000" : `file://${path.join(__dirname, "../build/index.html#")}`);
backgroundProcess.loadURL(isDev ? "http://localhost:3000" : `file://${path.join(__dirname, "../build/woker.html")}`)
configWindow.loadURL(isDev ? `http://localhost:3000#/config${mode.toString()}` : `file://${path.join(__dirname, `../build/index.html#config${mode}`)}`);
AbiWindow.loadURL(isDev ? "http://localhost:3000#/abi" : `file://${path.join(__dirname, "../build/index.html#abi")}`);

App.js路由：

  <HashRouter>
      <Route exact path='/' component={Mainmenu}/>
      <Route exact path='/fast' component={Fast}/>
      <Route exact path='/config0' component={ConfigWindow}/>
      <Route exact path='/abi' component={AbiWindow}/>
      <Route exact path='/slow' component={Slow}/>
      <Route exact path='/config1' component={SlowConfig}/>
      <Route exact path='/sell' component={Sell}/>
      <Route exact path='/config2' component={SellConfig}/>
  </HashRouter>

MainMenu 按钮路由：

function MainMenu() {
    return ( 
        <div className='no-gutters'>
            <div className='col no-gutters'>
                <div className='fast d-flex justify-content-center align-items-center'>
                    <Link className='fastbtn' to="/fast">FAST</Link>
                </div>
            </div>
            <div className='col no-gutters'>
                <div className='slow d-flex justify-content-center align-items-center'>
                    <Link className='slowbtn' to="/slow">SLOW</Link>
                </div>
            </div>
            <div className='col no-gutters'>
                <div className='sell d-flex justify-content-center align-items-center'>
                    <Link className='sellbtn' to="/sell">SELL</Link>
                </div>
            </div>
        </div>
     );
}

非常感谢任何帮助 提前致谢 ：）

Answer 1

如果您使用的是最新的 Electron，您可以将 更改为 。至少在我的测试中，两个路由器都应该在 Electron 中正常工作。正是 basename 导致了空白屏幕。

这应该让渲染进程知道正确的 url 在哪里。

另外，package.json 中的 homepage 仍应为 ./。

这就是我今天所做的以及相应的发布。查看 src/App.tsx 的更改

https://github.com/wongchito/RailMapGenerator/commit/1a2a5dbf3c5dca710f168837649e2b77e347c6b0

https://github.com/wongchito/RailMapGenerator/releases/tag/3.12.2