记录react+electron开发单页应用SPA遇到的路由问题

遇到的问题

在electron-vite提供的开发服务器中，electron能正常显示页面中的路由并能正常跳转.
而在build打包后，双击运行electron应用，路由失效，显示空白页面

排查BUG

阅读了脚手架为我生成的主函数代码：

  // HMR for renderer base on electron-vite cli.
  // Load the remote URL for development or the local html file for production.
  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
  } else {
    mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
  }

可以发现，开发模式下是通过本地链接直接显示vite开发服务器的页面
而非开发环境则是直接加载本地html页面

接下来我们再看我的react路由部分代码:

<BrowserRouter>
    <React.StrictMode>
        <App />
    </React.StrictMode>
</BrowserRouter>

可以发现我们使用了BrowserRouter模式的路由

推测原因

我认为在electron中，只是使用了浏览器来直接显示html页面，而没有正确处理路由BrowserRouter模式

验证

使用vite build打包html页面，不用electron显示，而是在nginx中测试
在nginx中发现能正常路由

解决方法

改用HashRouter模式路由，完美解决。

<HashRouter>
    <React.StrictMode>
        <App />
    </React.StrictMode>
</HashRouter>