score:30

Accepted answer

Another option would be to use hashHistory instead. Actually, in your referenced repo you can see that they're using hashHistory, how about trying that and posting back?

score:0

It all depends on what kind of URL you pass to mainWindow.loadURL.

file://...

If you load index.html directly through the file:// protocol, such as

mainWindow.loadURL('file://' + path.join(__dirname, '../index.html#/home'))

then you need to use HashRouter:

<HashRouter>
  <Routes>
    <Route path='/home' element={<MyHomeScreen/>}>
  </Routes>
</HashRouter>

Note that the # in index.html#/home is very important!

Why?

Think about what would happen if you wrote index.html/home. Your computer would try to retrieve a home file inside an index.html directory. The # prevents this, and thus we need to use HashRouter.

http://localhost:3000

If you load index.html from a server such as localhost:3000, then you have two options:

  • include the #, as in
    mainWindow.loadURL('http://localhost:3000#/home')
    
    and use HashRouter exactly as above,

OR

  • don't include the #, as in
    mainWindow.loadURL('http://localhost:3000/home')
    
    and use BrowserRouter like this:
    <BrowserRouter>
      <Routes>
        <Route path='/home' element={<MyHomeScreen/>}>
      </Routes>
    </BrowserRouter>
    

Many people prefer to use BrowserRouter in this case because it avoids complicating the URL with a #.

score:3

Agree with Niekert. But I believe it is better to handle like this before any route management.

if ( window.location.pathname.includes('index.html') ) {
    location.pathname = ROUTES.ROOT;
}

score:7

The (current) react-router docs say:

Generally speaking, you should use a <BrowserRouter> if you have a server that responds to requests and a <HashRouter> if you are using a static file server.

An Electron app is basically a static file server.

MemoryRouter can also work, so long as all routing originates from within the React part of the app. It only falls down when you want to navigate to a specific page from the Browser process, e.g. you want to pop up a new window and navigate directly to a "General Preferences" page. In that case, you can do this with HashRouter:

prefsWindow.loadURL(`file://${__dirname}/app/index.html#/general-prefs`);

I don't think there is a way to do that with MemoryRouter (from the Browser process).

score:8

What about simply using Switch to default to "/" as follows:

<Switch>
  <Route path="/" exact component={Home}/>
  <Route path="/foo" component={Foo}/>
  <Route path="/bar" component={Bar}/>
  <Route render={() => <Redirect to="/"/>}/>
</Switch>

This way, "/index.html" will redirect to "/"

score:20

Best option at the time of this answer is to use the MemoryRouter, worked for me :)

score:27

I'm using React Router v4 and didn't want to fallback to the HashRouter, so I solved it with something amongst the likes of:

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

const App = () => (
  <BrowserRouter>
    <div>
      {window.location.pathname.includes('index.html') && <Redirect to="/" />}
    </div>
  </BrowserRouter>
);

score:119

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:


Related Query

More Query from same tag