Electron-Vite(React)中react-router-dom生产环境失效，求HashRouter用法

使用npm create @quick-start/electron创建的React版Electron应用，react-router-dom在开发环境可正常运行，但生产环境路由完全失效。核心原因是Electron渲染进程不支持BrowserRouter依赖的HTML5历史模式路由，必须改用HashRouter替代BrowserRouter。

以下是验证后的完整配置方案：

1. 根组件配置HashRouter #

在渲染进程入口文件main.jsx中，用HashRouter包裹整个应用：

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

2. 路由组件路径调整 #

在App.jsx中，调整路由路径写法以适配HashRouter规则（无需手动添加#，HashRouter会自动处理路径前缀）：

import React from 'react'
import { Routes, Route, Navigate } from 'react-router-dom'
import PublicLayout from './layouts/PublicLayout'
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>
  )
}

3. 主进程加载HTML时的hash参数配置 #

在主进程src/main/index.js中，加载HTML文件时指定hash参数，确保应用启动时直接跳转到登录页：

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

验证步骤 #

1. 执行构建命令：npm run build
2. 运行生产版本应用：npm run start:prod
3. 测试路由跳转，确认页面能正常切换且刷新后不会出现404

内容的提问来源于stack exchange，提问作者Jimwel Dizon