How to route in electron react app during production

JavaScript / 22.02.2023 / ,

I am using electron 6.10.0 and using React.js.

In my app, there is an add task option in menu, which creates a new window.

Everything works fine during development, but during production this line causes problem.

addWindow.loadURL(isDev ? 'http://localhost:3000/add' : `file://${path.join(__dirname, '../build/index.html')}`);

It loads index.html, through which it loads index.js and which renders router.js. This is the code in Router.js.

<HashRouter>
    <Switch>
        <Route exact path="/" component={App} />
        <Route exact path="/add" component={addWindow} />
    </Switch>
</HashRouter>

Mainwindow works fine because the hash is ‘ / ‘ but for add window the hash doesn’t change and it loads the mainwindow content again in addwindow.

In my case, I had a problem with a hash fragment in a path that is encoded as /build/index.html%23add, and that file/url doesn’t exist.

I added hash property to url format and all works fine.

const path = require('path')
const url = require('url')

url.format({
    pathname: path.join(__dirname, 'index.html'),
    hash: '/add',
    protocol: 'file:',
    slashes: true
})