React-router V-5.2.0 is not working when navigating away from homepage

Question

index.tsx

import {Router, } from 'react-router';
import { createHashHistory } from 'history';

  const hashHistory = createHashHistory();
  hashHistory.push("/");
  ReactDOM.render(
    <Provider {...stores}>
      <Router history={hashHistory} >
          <App />
      </Router>
    </Provider>,
    document.getElementById('root') as HTMLElement
  );

App.tsx

import Router from './components/Router';
  public render() {
    return <Router/>;
  }

Router

import { Route, Switch } from 'react-router';

const Router = () => {
  const UserLayout = utils.getRoute('/user').component;
  const AppLayout = utils.getRoute('/').component;
  
  return (
    <Switch>
      <Route path="/user" render={(props: any) => <UserLayout {...props} />} />
      <Route path="/test" render={() => <div>Test</div>} />
      <ProtectedRoute path="/" render={(props: any) => <AppLayout {...props} exact />} />
    </Switch>
  );
};

Electron

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const isDev = require('electron-is-dev');
const path = require('path');
const url = require('url');
var history = require('connect-history-api-fallback');

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    nodeIntegration: true,
    webPreferences: {
      webSecurity: false
    }
  });

  mainWindow.loadURL(!isDev ? 'http://localhost:3000' : url.format({
    pathname: path.join(__dirname,'../build/index.html'),
    protocol: 'file:',
    slashes: true,
  }));
  
  mainWindow.webContents.openDevTools();
  mainWindow.on('closed', function () {
    mainWindow = null;
  });
}

app.on('ready', createWindow);
app.on('ready', () => console.log('Ready', history({index: 'index.html'})));

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
console.log('global window', __dirname);
app.on('activate', function () {
  console.log('mainWindow', __dirname);

  if (mainWindow === null) {
    console.log('mainWindowNull', __dirname);
    createWindow();
  }
});

I also tried using the 'react-router-dom' but it won't also work. This only happens in production. The homepage will load even if I reload it. But when I navigate away from the homepage for instance I click the login button it throws an error and the screen is white. In my network tab, it shows file:///D: in red. Also I'm not using Webpack.

Answer 1

And Example to make it work with react-router-dom.

In your index.tsx file import it like

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

<BrowserRouter>
  <App />
</BrowserRouter>

The redux store will be also wrapping the Browser Router since you are using that. There is no need to import history and / or create a hashHistory.

You can declare your Routes like this:

<Switch>
    <Route exact path="/home" component={Home} />
</Switch>

or

 <Route
      path="/blog/:slug"
      render={({ match }) => {
        // Do whatever you want with the match...
        return <div />;
      }}
    />

Now, if you want to navigate away anywhere inside a component, you need to import withRouter

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

inside the component

and wrap the export with it like:

export default withRouter(DemoComponent);

this will pass the history object as a prop to your component. To navigate away, simply call:

props.history.push('/'); // can be anything here you want to navigate to

If you don't use functional components it probably would look like this:

this.props.history.push('/');