DocumentaçãoGuiasMigraçãoMigrando da v1 para a v2

Migrando da v1 para a v2

Aprenda como migrar do Electron Router DOM v1 para a v2

Atualizando as dependências

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

Lembrando, que, as versões mínimas necessárias para o Electron Router DOM v2 são:

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

Criando o arquivo electron-router-dom.ts

Na pasta src do seu projeto, crie uma pasta lib e dentro dela o arquivo electron-router-dom.ts. É, através desse novo arquivo que você irá expor o método registerRoute e o componente Router para a sua aplicação.


  • O método registerRoute será usada no main process para registrar uma janela como uma rota da aplicação.
  • O componente Router será usado no renderer process para navegar entre as janelas/rotas da aplicação.

src/lib/electron-router-dom.ts
  import { createElectronRouter } from 'electron-router-dom'
 
  export const { Router, registerRoute } = createElectronRouter({
    port: 4927, // a porta em que o seu servidor React está rodando (opcional, porta padrão é 3000)
 
    types: {
      /**
       * Os ids das janelas da sua aplicação, pense nesses ids como os basenames das rotas
       * essa nova forma permitirá que o intelisense do seu editor te ajude a saber quais ids estão disponíveis
       * tanto no main quanto no renderer process
       */
      ids: ['main'],
    },
  })

Atualizando o processo principal

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

Com a remoção das funções createFileRoute e createURLRoute do pacote electron-router-dom, o processo ficou mais simples e intuitivo. Agora, você só precisa importar a função registerRoute do arquivo electron-router-dom.ts que você criou anteriormente.

O que antes era feito dessa forma:

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)

Agora, será feito dessa:

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

Você não precisa mais se preocupar com a lógica de carregar a URL do servidor de desenvolvimento ou o arquivo HTML da aplicação, o Electron Router DOM cuidará disso para você.

Atualizando as importações no processo de renderização

Agora o componente Route não é mais exportado do pacote electron-router-dom, mas sim do pacote react-router-dom. Além de simplificar o uso do Electron Router DOM, essa decisão ajudará a causar menos confusão sobre o que deverá ser importado de cada pacote.

src/renderer/routes.tsx
+ import { Route } from 'react-router-dom'
 
- import { Router, Route } from 'electron-router-dom'
+ import { Router } from '../lib/electron-router-dom'
Resolução de problemasExemplos