DocsGuidesMigrationMigrating from v1 to v2

Migrating from v1 to v2

Learn how to migrate from Electron Router DOM v1 to v2

Updating dependencies

npm i react-router-dom@latest electron-router-dom@latest

Remember, the minimum versions required for Electron Router DOM v2 are:

  • electron: >=17.0
  • react: >=18.0
  • react-router-dom: >=6.22.3

Creating the electron-router-dom.ts file

In the src folder of your project, create a lib folder and inside it the electron-router-dom.ts file. It is through this new 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 a route of the application.
  • The Router component will be used in the renderer process to navigate between the windows/routes of the application.

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'],
    },
  })

Updating the main process

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

With the removal of the createFileRoute and createURLRoute functions from the electron-router-dom package, the process has become simpler and more intuitive. Now, you only need to import the registerRoute function from the electron-router-dom.ts file you created earlier.

What was done this way before:

src/main/index.ts
  const devServerURL = createURLRoute('http://localhost:3000', id)
 
  const fileRoute = createFileRoute(
    join(__dirname, '../renderer/index.html'),
    id
  )
 
  process.env.NODE_ENV === 'development'
    ? window.loadURL(devServerURL)
    : window.loadFile(...fileRoute)

Now, it will be done like this:

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

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

Updating imports in the rendering process

Now the Route component is no longer exported from the electron-router-dom package, but from the react-router-dom package. In addition to simplifying the use of Electron Router DOM, this decision will help cause less confusion about what should be imported from each package.

src/renderer/routes.tsx
+ import { Route } from 'react-router-dom'
 
- import { Router, Route } from 'electron-router-dom'
+ import { Router } from '../lib/electron-router-dom'
TroubleshootingExamples