Electron中createHashHistory路由跳转异常问题求助

我之前也踩过这个坑！在Web环境下用createHashHistory的push()完全正常，但到Electron里加载本地file://协议的页面时，就会把路径直接替换成本地文件路径，根本不往#后面加。

问题根源 #

Web环境里页面基于HTTP/HTTPS协议，history.push('/home')会默认把路径加到#之后；但Electron加载本地HTML时用的是file://协议，此时/home会被解析成本地文件系统的绝对路径，直接覆盖了原有的页面路径，就出现了你看到的file:///C:/home这种情况。

几个可行的解决方案 #

1. 给createHashHistory配置正确的basename

创建history实例时，把basename设为当前页面的文件路径，让它知道要基于这个路径来处理hash部分：

import { createHashHistory } from 'history';

// 拿到当前页面的完整文件路径作为basename
const history = createHashHistory({
  basename: window.location.pathname
});

之后再调用history.push('/home')，就会正确把路径加到#后面，变成file:///C:/AppData/Local/Programs/ReactApp/resources/app/build/index.html#/home。

2. 直接操作window.location.hash（最稳妥的临时方案）

如果上面的配置还是有问题，直接手动修改hash部分是最直接的：

// 替换原来的history.push('/home')
window.location.hash = '#/home';

这种方式完全绕开history的路径解析问题，直接修改URL的hash片段，在Electron本地环境里非常可靠。

3. 检查Electron的页面加载方式

确保你在Electron主进程里是用loadFile加载页面的，而不是手动拼接file:// URL：

const path = require('path');
// 用loadFile自动处理路径，避免手动拼接出错
mainWindow.loadFile(path.join(__dirname, 'build', 'index.html'));

loadFile会自动生成正确的file:// URL，减少路径解析的异常。

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