If you've already tried using react-router-dom with Electron, had difficulties getting it to work both in development and in production and in different windows, this library is for you 🚀
Features
- 🚀 Ready for Development and Production environments
- 🔥 Works on Multiple windows
- 📦 Isolated routes by window id
Installation
In your terminal, run:
yarn add electron-router-dom
# OR
npm i electron-router-dom
Router DOM is a peer dependency, if you haven't installed it yet or your package manager won't handle it automatically for you, so run:
yarn add react-router-dom
# OR
npm i react-router-dom
Usage
The main thing to keep in mind is: you must use the same window id in the Electron Main Process used in createFileRoute and createURLRoute functions and in the Electron Renderer Process in the <Router> component prop names.
Electron Main Process
import {
app,
BrowserWindow,
BrowserWindowConstructorOptions as WindowOptions,
} from 'electron'
import { createFileRoute, createURLRoute } from 'electron-router-dom'
import { join } from 'path'
function createWindow(id: string, options: WindowOptions = {}) {
const window = new BrowserWindow({
width: 700,
height: 473,
...options,
})
const devServerURL = createURLRoute(process.env['ELECTRON_RENDERER_URL']!, id)
const fileRoute = createFileRoute(
join(__dirname, '../renderer/index.html'),
id
)
process.env.NODE_ENV === 'development'
? window.loadURL(devServerURL)
: window.loadFile(...fileRoute)
return window
}
app.whenReady().then(() => {
createWindow('main', {
webPreferences: {
preload: join(__dirname, '../preload/index.js'),
},
})
createWindow('about', {
width: 450,
height: 350,
show: false,
})
})
Electron Renderer Process
Create a routes.tsx file:
import { Router, Route } from 'electron-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 />} />}
/>
)
}
Then, import the AppRoutes in your index.tsx:
import ReactDom from 'react-dom/client'
import React from 'react'
import { AppRoutes } from './routes'
ReactDom
.createRoot(document.querySelector('app') as HTMLElement)
.render(
<React.StrictMode>
<AppRoutes />
</React.StrictMode>
)
A simple example of a MainScreen component:
import { useNavigate } from 'react-router-dom'
// The "App" comes from the context bridge in preload/index.ts
const { App } = window
export function MainScreen() {
const navigate = useNavigate()
return (
<main>
<button onClick={() => navigate('/search')}>Go to Search screen</button>
<button onClick={App.OpenAboutWindow}>Open About window</button>
</main>
)
}
To get more knowledge about this library, please,
check the Electron Router DOM GitHub Repository
Thanks 💜
Top comments (1)
Tysm.