react-router-dom v5 does not work with electron in production

I’m having an issue using react-router-dom with electron. In development, the router correctly functions and routes users between the different pages. In production, the router no longer functions correctly. In addition to the repo showing the issue, I have some gifs that can quickly outline the problem. Working in development, not working in production.

I am not using redux, and I am using the HashRouter, but I have also tried the MemoryRouter with no luck…

edit I just tested with version 4 of react router dom and it works correctly in production and development. So it seems that this issue is related to version 5.

Version

"electron": "^5.0.0",
"electron-builder": "^20.39.0",
"electron-webpack": "^2.6.2",
"react-router-dom": "^5.0.0"

Test Case

https://github.com/kyle-mccarthy/react-router-dom-electron-issue

Steps to reproduce

The best way to reproduce this error is through the provided github repo.

Expected Behavior

The router should continue to work under the production environment.

Actual Behavior

The router does not correctly work in production.

[granaber]

Hi Hackers,

The problem with electron and react-router-dom is that electron when working in production mode (not really) is that you with electron are creating an application, (although it is known that it is a scan with js code running in backgroud), electron does not handle history and works with the synchronized URL, BrowseHistory does not work with electron, therefore you must use HashRouter that if you synchronize your URL with a UI that is (windows.location.hash).

This would be your final code for electron and react-router-dom to work perfectly

// Not BrowserHistory, this for pageweb
import { HashRouter, Route } from "react-router-dom";

class App extends Component {
  render() {
    return (
        <HashRouter> 
          <Route exact={true} 
                  path='/'    
                  render={(props) => 
                          <iLogin {...props}/>
                        }
          />
          <Route path='/InitMenu' component={InitMenu}/>
        </HashRouter>
    );
  }
}

This is the solution … it is not a problem of versions

Happy Hacking

[dwjohnston]

Ok, got this sorted:

The issue was that in some places I was importing (IDE did this for me) Link like:

import { Link } from 'react-router-dom/cjs/react-router-dom';

changing it to:

import { Link } from 'react-router-dom';

solves the issue for me.