React and Electron multi-window Setup 💻

Getting started with Electron and React is not easy stuff, that is the reason most people use some Starter or Boilerplate repo, and That is completely fine. But with React + Electron, most of these boilerplates are missing the configuration for setting up multiple windows routing with react.

I will be discussing how you can configure routing for a web pack-based Electron and React boilerplate. I will be using basic-electron-boilerplate.

What is happening inside of this repo is whenever you will open up a new window will open up the same react instance or if you want to call it the same React page. I will be helping you set up a router so you can easily handle multiple screens on multiple windows.

Let us create a component inside the src folder and call it ViewManager and paste this inside of it.

What this will do is you are basically defining all of your components in an object in a function called View. So instead of the browser loading URL https://localhost:8000/ it is loading https://localhost:8000/?browser, where “browser” will indicate a component and in by calling ViewManager.View, it will return a component based on the searched Key.

Inside the main.js

We need to convert this into a function and send our custom parameters as a search parameter, and you can achieve this by following this step.

We basically just put our component as a query parameter, and it will create a path, and while making a window, you should use something like this

That's it ✨. This is going to load up a separate react component if you give a unique pathname.