Can't get Electron to work with React router

Question

I have an electron app that uses React.

I use react-router-dom to route different windows to different components -

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
    <React.StrictMode>
        <HashRouter>
            <Routes>
                <Route path='/' element={<App />} />
                <Route path='add' element={<LinkDialog/>} />
                <Route path='modify' element={<LinkDialog/>} />
                <Route path='edit' element={<EditDialog />} />
            </Routes>
        </HashRouter>
    </React.StrictMode>
)

To load each route on each window I use something like this:

const VITE_DEV_SERVER_URL = process.env['VITE_DEV_SERVER_URL']
process.env.DIST = path.join(__dirname, '../dist')
const loadRoute = (window, route) => {
    if (VITE_DEV_SERVER_URL) {
        const url = new URL(VITE_DEV_SERVER_URL)
        url.pathname = route
        window.loadURL(url.href)
    } else {
        window.loadFile(path.join(process.env.DIST, '../renderer/index.html'), { hash: route })
    }
}

When I'm debugging my code I use BrowserRouter and the pages show properly, but when build the app (And of course switch to HashRouter the pages won't render, and I can't figure out what I'm doing wrong.

Also, how can I switch the Router type automatically so I won't have to do it when changing between build/dev?

Why do you change it to `HashRouter`? – Konrad Jul 11 '23 at 19:02 — Konrad, Jul 11 '23 at 19:02
https://stackoverflow.com/a/50404777/18877953 – LITzman Jul 11 '23 at 19:04 — LITzman, Jul 11 '23 at 19:04

score 1 · Answer 1 · answered Jul 13 '23 at 09:58

1

After a few days of struggle I found electron-router-dom. It's a wrapper that leaves no room for error both in the electron process and in the renderer process. I used It, and my problem was solved

answered Jul 13 '23 at 09:58

LITzman

730
1
16

Can't get Electron to work with React router

1 Answers1