电子vite（反应js）>反应路由器DOM不工作

Question

我使用

npm create @quick-start/electron

(react js) 创建了一个电子应用程序。

react-router-dom

库正在开发中，但尚未投入生产。

他们说 Electron 不处理浏览器历史记录，我应该使用

HashRouter

而不是

BrowserRouter

。 https://evite.netlify.app/guide/troubleshooting.html#vue-router-or-react-router-dom-works-in-development-but-not-生产

有人知道如何使用

HashRouter

吗？

我希望在构建应用程序时能够使

react-router-dom

正常工作。

已编辑

代码

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

Answer 1

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

我使用此约定为我的项目导入 App.tsx 中的 React-router-dom 组件。它在发布应用程序或运行 npm start 时起作用，后者运行 --preview ，为您在开发人员设置中提供应用程序的生产预览。我还需要指定：

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

在 src > main > index.ts