How to use React Router with Electron?

Question

Using this boilerplate as reference I created an Electron app. It uses webpack to bundle the scripts and express server to host it.

Webpack config is practically same as this and server this.

Electron's script loads:

mainWindow.loadURL('file://' + __dirname + '/app/index.html');

And index.html loads the script hosted by the server:

<script src="http://localhost:3000/dist/bundle.js"></script>

I run electron index.js to build the app and node server to start server which using webpack bundles the scripts.

It works fine, my React component App is mounted. But how I integrate react-router into this?

I implemented it the same way I would in a browser app. I get this error:

[react-router] Location "/Users/arjun/Documents/Github/electron-app/app/index.html" did not match any routes

It is taking file path as the route. Going through the boiler plate code did not help. What am I missing?

Answer 1

Had to Replace BrowserRouter with HashRouter.

import {
  HashRouter,
  Route
} from "react-router-dom";

And then in my index.js or the entry file of the Electron app I had something like this:

<HashRouter>
  <div>
    <Route path="/" exact     component={ Home } />
    <Route path="/firstPage"  component={ FirstPage } />
    <Route path="/secondPage" component={ SecondPage } />
  </div>
</HashRouter>

And then everything just worked.

The reasoning: BrowserRouter is meant for request-based environments whereas HashRouter is meant for file-based environments.

Read more here:

• https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/HashRouter.md