Cannot GET /main_window/page error after manual refresh in React in Electron generated from Electron-forge

Question

I created an Electron forge project as described in the forge guide using the "typescript + webpack" template:

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

And added React to it, also as described in the guide on a different subpage:

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

And integrated it like this:

{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);

Now when I run the app with npm start it works fine but when, for example, login page is displayed and I hit ctrl+r I get a blank page saying Cannot GET /main_window/page with 404 error in the devtools.

I found a similar issue with "pure" react apps where adding below to webpack's config fixes the issue but in my case adding it to webpack plugin config in packages.json doesn't help.

"devServer": {
    historyApiFallback: true
},

Felony

Answer 1

TLDR: Use HashRouter instead of Router

I had the same issue and solved it based on this answer. Here are the HashRouter Docs for react-router-dom-v5 and react-router-dom-v6.

Using react-router-dom-v6 within an app based on electron-forge's webpack+typescript template, using HashRouter solved my issue.

Langston

Answer 2

In the forge configuration, add an entryPoint with an empty name.

Something like that:

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

Surgy