electron + react +react-router-dom 打包桌面应用白屏

！执行2025-08-30 17:04

hash 是空字符串，说明你访问的是：

复制代码

file:///D:/web3/Harbour/resources/app.asar/build/index.html

没有带 #/ ，React Router 的 <Route path="/"> 也就匹配不到，所以整个 <main> 里什么都没有。

✅ 立即解决

1. 手动在地址栏加上哈希

复制代码

file:///D:/web3/Harbour/resources/app.asar/build/index.html#/

然后回车，看页面是否渲染出 Home 组件内容。

2. 或者把路由改成"兜底"匹配

在 App.tsx 里加一条通配路由，确保任何路径都至少渲染点什么：

tsx 复制代码

<Routes>
  <Route path="*" element={<Home />} />   {/* 兜底 */}
  <Route path="/" element={<Home />} />
  <Route path="/user" element={<User />} />
  ...
</Routes>

这样即使 hash 为空也能渲染 Home。

✅ 最终建议（Electron 打包后的正确姿势）

Electron 启动时，主动把窗口导航到带哈希的路径：

js 复制代码

// main.js / main.ts
mainWindow.loadURL(
  url.format({
    pathname: path.join(__dirname, 'build/index.html'),
    protocol: 'file:',
    slashes: true,
    hash: '/',            // 关键：自动带 #
  })
);

或者使用 win.loadFile 的等价写法：

js 复制代码

mainWindow.loadFile('build/index.html', { hash: '/' });

✅ 总结

现象	原因	解决
`hash` 为空	没有 `#/` → 路由匹配失败	1. 地址栏手动加 `#/` 2. 路由加 `path="*"` 3. 主进程加载时主动带 `hash: '/'`

先试第 1 步手动加 #/，确认页面能出来，再按第 3 步修改主进程，让最终打包版自动跳到正确路径。