Electron-React-Boilerplate中HashRouter多窗口路由加载问题求助

开发者阿泽

2026-7-2

解决Electron-React-Boilerplate中HashRouter打包后新窗口白屏问题

问题核心

开发环境下直接拼接Hash路由能正常加载，但打包后使用file协议时，Hash不能直接作为文件名的一部分传递，且原路径解析函数可能指向错误的打包产物目录，导致路由无法被React Router捕获。

解决方案

1. 正确拼接Hash路由

不要将Hash部分嵌入到resolveHtmlPath的文件名参数中，先获取基础HTML文件的URL，再手动拼接Hash：

// main.ts中加载新窗口的代码
const baseUrl = resolveHtmlPath('index.html');
liveWindow?.loadURL(`${baseUrl}#/app/settings`);

2. 修正生产环境路径解析

electron-react-boilerplate打包后，renderer的产物默认存放在build目录而非原renderer目录，需修改resolveHtmlPath函数的生产环境路径：

export function resolveHtmlPath(htmlFileName: string) {
  if (process.env.NODE_ENV === 'development') {
    const port = process.env.PORT || 1212;
    const url = new URL(`http://localhost:${port}`);
    url.pathname = htmlFileName;
    return url.href;
  }
  // 修正为指向build目录
  return `file://${path.resolve(__dirname, '../build/', htmlFileName)}`;
}

3. 延迟设置Hash（备选方案）

如果直接拼接Hash仍无效，可在页面加载完成后通过JS注入方式设置路由，确保React Router已初始化：

liveWindow?.loadURL(resolveHtmlPath('index.html'));
liveWindow?.webContents.on('did-finish-load', () => {
  liveWindow?.webContents.executeJavaScript(`window.location.hash = '#/app/settings'`);
});