Question

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

2022-04-19

949

reactjs webpack electron electron-forge

我按照 forge 指南中的说明，使用“typescript + webpack”模板创建了一个 Electron 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 错误devtools。

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

"devServer": {
    historyApiFallback: true
},

Answer 1

TLDR： 使用 HashRouter 而不是 Router

我遇到了同样的问题，并根据这个答案解决了它。以下是 react-router-dom-v5 和 react-router-dom-v6 的 HashRouter 文档。

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

Answer 2

在 forge 配置中，添加一个名称为空的 entryPoint。

类似于：

const config = {
  // ...
  plugins: [
    new WebpackPlugin({
      // ...
      renderer: {
        entryPoints: [
          {
            name: '',
            html: './src/index.html',
            js: './src/renderer.tsx',
            preload: {
              js: './src/preload.ts'
            }
          }
          // ...
        ]
      }
    })
  ]
}