CODEWITHSUNDEEP
reactjselectronreact-router-domvite
Jimwel Dizon
Jimwel Dizon

Reputation: 31

electron-vite (react js) > react-router-dom not working

I created an electron app using npm create @quick-start/electron (react js). The react-router-dom library is working on development but not in the production.

They said that electron does not handle the browser history and I should use a HashRouter instead of BrowserRouter. https://evite.netlify.app/guide/troubleshooting.html#vue-router-or-react-router-dom-works-in-development-but-not-production

Does anyone know how to use the HashRouter?

I was expecting to make the react-router-dom work when I build the app.

edited

CODE

main.jsx

import React from 'react'
import { HashRouter } from 'react-router-dom'

import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <HashRouter>
      <App />
    </HashRouter>
  </React.StrictMode>
)

App.jsx

import React from 'react'

// libraries
import { Routes, Route, Navigate } from 'react-router-dom'

// layouts
import PublicLayout from './layouts/PublicLayout'

// public pages
import Login from './pages/Public/Login'

const App = () => {
  return (
    <>
      <Routes>
        <Route path="/*" element={<PublicRoutes />} />
      </Routes>
    </>
  )
}

export default App

export const PublicRoutes = () => {
  return (
    <Routes>
      <Route element={<PublicLayout />}>
        <Route path="/login" element={<Login />} />
      </Route>

      <Route path="/*" element={<Navigate to="/login" replace />} />
    </Routes>
  )
}

src>main>index.js

mainWindow.loadFile(join(__dirname, '../renderer/index.html'), { hash: 'login' })

Upvotes: 2

Views: 1943

Answers (2)

Pedro Henrique Rodrigues
Pedro Henrique Rodrigues

Reputation: 1

I'm using the library from https://electron-router-dom.daltonmenezes.com/.

It can manage routes for each Electron window.

Upvotes: 0

Ryan Large
Ryan Large

Reputation: 11

import { HashRouter as Router, Routes, Route } from "react-router-dom";

I used this convention for importing the react-router-dom components in App.tsx for my project. It worked when publishing the application or running npm start which runs --preview giving you a production preview of your application in a developers setting. I also needed to specify:

mainWindow.loadFile(join(__dirname, '../renderer/index.html'), { hash: 'login' })

in src > main > index.ts

Upvotes: 0

Related Questions