在 Electron-forge 生成的 Electron 中的 React 中手动刷新后无法获取 /main_window/page 错误

Question

我使用“typescript + webpack”模板创建了一个 Electron forge 项目，如forge 指南中所述：

yarn create electron-app debugging-test --template=typescript-webpack

并向其中添加了 React，也如不同子页面上的指南中所述：

yarn add react react-dom
yarn add --dev @types/react @types/react-dom

并像这样集成它：

{imports section}

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <Router>
        <Routes>
          <Route path='/main_window' element={<App />}>
            <Route index element={<HomePage />} />
            <Route path='about' element={<AboutPage />} />
            <Route path='login' element={<LoginPage />} />
            <Route path='*' element={<PageNotFound />} />
          </Route>
        </Routes>
      </Router>
    </Provider>
  </React.StrictMode>,
  reactAppDiv);

现在，当我运行该应用程序时，npm start它工作正常，但例如，当显示登录页面并且我点击ctrl+时r，我会得到一个空白页面，在开发工具中Cannot GET /main_window/page显示错误。404

我发现“纯”React 应用程序也存在类似问题，将以下内容添加到 webpack 的配置中可以修复问题，但在我的情况下，将其添加到 webpack 插件配置中并packages.json没有帮助。

"devServer": {
    historyApiFallback: true
},

Answer 1

TLDR：使用HashRouter而不是Router

我有同样的问题并根据此答案解决了它。这是react-router-dom-v5和react-router-dom-v6的HashRouter文档。

react-router-dom-v6在基于 electro-forge 的 webpack+typescript 模板的应用程序中使用，HashRouter解决了我的问题。