Categories
React Answers

How to use React Router with Electron?

Spread the love

Sometimes, we want to use React Router with Electron.

In this article, we’ll look at how to use React Router with Electron.

How to use React Router with Electron?

To use React Router with Electron, we can use HashRouter.

For instance, we write

import { HashRouter, Route } from "react-router-dom";

to import HashRouter.

Then we write

<HashRouter>
  <div>
    <Route path="/" exact component={Home} />
    <Route path="/firstPage" component={FirstPage} />
    <Route path="/secondPage" component={SecondPage} />
  </div>
</HashRouter>

to wrap HashRouter around our Routes to render them.

HashRouter works because Electron runs our React app in a file-based environment.

Conclusion

To use React Router with Electron, we can use HashRouter.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

2 replies on “How to use React Router with Electron?”

It would be great if you could show how to transition from one page to the next. For example, say I have a Button (and I’m using @material-ui for controls) and the button click takes me to another page, what would that look like and how would I set up the onclick handler for that button to take me to another page? Thanks in advance!

Leave a Reply

Your email address will not be published.