DocsGetting StartedIntroduction

Introduction

A quick introduction to Electron Router DOM

If you've ever tried using the react-router-dom library with Electron, you've probably had trouble getting it to work properly, both in development and production environments.

From this, the Electron Router DOM library was born, which aims to facilitate the integration of react-router-dom with Electron and window routing, where each window can have its own routing.

Features

  • 🚀 Ready for production and development environments
  • 📱 Window routing support
  • 🌐 Support for query strings sent from the main process to the renderer
  • 🧬 Type-safe API designed to provide good DX

Installation

In your terminal and in the root folder of your application, run:

npm i electron-router-dom

Creating your first routing

Create the electron-router-dom.ts file

In your project's src folder, create a lib folder and within it the electron-router-dom.ts (or .js) file. It is through this file that you will expose the registerRoute method and the Router component to your application.


  • The registerRoute method will be used in the main process to register a window as an application route.
  • The Router component will be used in the renderer process to navigate between the application's windows/routes.

src/lib/electron-router-dom.ts
  import { createElectronRouter } from 'electron-router-dom'
 
  export const { Router, registerRoute } = createElectronRouter({
    port: 4927, // the port of your React server is running on (optional, default port is 3000)
 
    types: {
      /**
       * The ids of the windows of your application, think of these ids as the basenames of the routes
       * this new way will allow your editor's intelisense to help you know which ids are available to use
       * both in the main and renderer process
       */
      ids: ['main'],
    },
  })

Update the main process

Import the registerRoute method from the electron-router-dom.ts file you created earlier:

src/main/index.ts
  import { registerRoute } from '../lib/electron-router-dom'

And in the function where you create your application window, after creation, register the route by passing your window to registerRoute:

src/main/index.ts
  registerRoute({
    id: 'main',
    browserWindow: window,
    htmlFile: path.join(__dirname, '../renderer/index.html'),
  })

Note that you no longer need to worry about the logic of loading the development server URL or the application HTML file, the Electron Router DOM will take care of that for you.

Update the renderer process

Import the Router component from the electron-router-dom.ts file you created earlier:

src/renderer/routes.tsx
  import { Router } from '../lib/electron-router-dom'

And with that you will need to pass your routes to the Router component, see an example:

src/renderer/routes.tsx
  import { Router } from 'electron-router-dom'
  import { Route } from 'react-router-dom'
 
  import { MainScreen, AboutScreen, SearchScreen } from './screens'
 
  export function AppRoutes() {
    return (
      <Router
        main={
          <>
            <Route path="/" element={<MainScreen />} />
            <Route path="/search" element={<SearchScreen />} />
          </>
        }
        about={<Route path="/" element={<AboutScreen />} />}
      />
    )
  }
Changelog