ElectronJS26+React HashRouter打包后路由失效及窗口加载问题求助

错误原因分析 #

• 用loadFile拼接路径（如index.html/videos/0）是错误逻辑：Electron会把index.html当作目录解析，自然找不到对应文件。
• loadFile不支持直接附加哈希（#）：哈希属于URL的一部分，loadFile仅处理本地文件路径，无法识别哈希路由。

方案1：HashRouter + loadURL（推荐） #

这是Electron本地环境下最可靠的路由方案，无需处理服务器级路由 fallback。

1. 修改React路由为HashRouter

import { HashRouter, Routes, Route } from 'react-router-dom';

<HashRouter>
  <Routes>
    <Route path="/" element={<MainPage />} />
    <Route path="/video/:id" element={<VideoComponent/>} />
  </Routes>
</HashRouter>

2. 主进程用loadURL加载带哈希的本地URL
   用URL对象构建正确的file协议地址，避免手动拼接出错：

const videoPageUrl = new URL(
  `renderer/index.html#/video/0`,
  `file://${app.getAppPath()}/`
).toString();

videoWindow.loadURL(videoPageUrl);

方案2：保留BrowserRouter的处理方式 #

若坚持使用BrowserRouter，需做以下调整：

1. 给BrowserRouter设置basename
   适配Electron打包后的本地文件路径：

import { BrowserRouter, Routes, Route } from 'react-router-dom';

// 生产环境适配本地文件路径，开发环境保持根路径
const basename = process.env.NODE_ENV === 'production' 
  ? `file://${app.getAppPath()}/renderer/` 
  : '/';

<BrowserRouter basename={basename}>
  <Routes>
    <Route path="/" element={<MainPage />} />
    <Route path="/video/:id" element={<VideoComponent/>} />
  </Routes>
</BrowserRouter>

2. 主进程加载后跳转路由
   通过executeJavaScript在页面加载完成后跳转，或直接构建正确的file URL：

// 方式1：加载根页面后跳转路由
videoWindow.loadFile(path.join(app.getAppPath(), 'renderer/index.html'));
videoWindow.webContents.on('did-finish-load', () => {
  videoWindow.webContents.executeJavaScript('window.location.pathname = "/video/0"');
});

// 方式2：直接构建带路由的file URL
const videoPageUrl = new URL(
  `renderer/video/0`,
  `file://${app.getAppPath()}/`
).toString();
videoWindow.loadURL(videoPageUrl);

注意：使用BrowserRouter时，需确保vite打包配置（如build.outDir）与文件结构匹配，避免路由解析失败。

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