Routing doesn't work on packaged Electron app using ReactJS and reach-router

Question

I've managed to complete successful packaging of a React App using electron. It runs fine and loads the home page but when I try to route, it simply doesn't work. I am using reach-router for my project and I'm guessing I have to tweak my routing configuration for this purpose.

FYI, Its not a network request that I'm making, its simply routing to login page from homepage which doesn't need an API call. But nothing happens.

import { Router } from '@reach/router';
const App = () => (
    <Provider store={STORE}>
      <Main>
        <Router>
           <Home default path="/" />
           <Login path="login" />
        </Router>
      </Main>
   </Provider>
);


export default App;

There is help on how to fix this issue with react-router but there is nothing on reach-router on the internet.

Answer 1

Okay so I encountered this issue on Github, and the solution suggested works as intended: https://github.com/reach/router/issues/25

The idea is to use memory history(since reach doesn't support hash). Reach exposes createMemorySource, createHistory, and LocationProvider for this purpose.

let source = createMemorySource("/starting/url")
let history = createHistory(source)

let App = () => (
  <LocationProvider history={history}>
    <Router>
      {/* ... */}
    </Router>
  </LocationProvider>
)

Reach-router docs suggest creating memory source is for development purposes but its perfectly suitable for Electron use case. I hope this helps someone in the future.