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 里加一条通配路由,确保任何路径都至少渲染点什么:

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

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


✅ 最终建议(Electron 打包后的正确姿势)

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

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

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

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

✅ 总结

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

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

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐