React Router HashRouter 重定向至<base>标签URL的技术问题咨询

我之前碰到过完全一样的场景，问题根源在于HashRouter的默认行为和全局设置的<base href="/">发生了冲突，导致路由导航直接跳离了React应用所在的页面。下面给你拆解问题并提供可行的解决方案：

问题到底出在哪？ #

当你使用HashRouter时，它生成的<Link>标签默认使用相对URL（比如#/），但因为页面里设置了<base href="/">，浏览器会把这个相对URL解析成根路径的hash地址（也就是/#/），而不是你期望的React应用所在页面/some/static/page的hash地址（/some/static/page#/）。

一旦用户点击这类链接，浏览器就会跳转到根路径，直接离开React应用所在的页面，自然所有路由功能都失效了。

最优解决方案：自定义Hash History #

我们可以通过重写Hash History的createHref方法，让Link生成的href自动带上当前页面的路径，确保点击后始终停留在React应用页面，同时保持Hash路由的正常解析。

具体代码实现如下：

import React from 'react';
import { HashRouter, Route, createHashHistory } from 'react-router-dom';
import Root from './Root'; // 替换成你的Root组件路径

// 创建自定义的hash history实例
const customHistory = createHashHistory();
// 保存原始的createHref方法，后面会用到
const originalCreateHref = customHistory.createHref;

// 重写createHref方法，把当前页面的路径拼接到hash路由前面
customHistory.createHref = (location) => {
  const currentPagePath = window.location.pathname;
  return `${currentPagePath}${originalCreateHref(location)}`;
};

export class App extends React.Component {
  render() {
    return (
      // 使用自定义的history替代默认的HashRouter history
      <HashRouter history={customHistory}>
        <div>
          <Route exact path="/" component={Root} />
          {/* 其他路由配置可以完全保持不变 */}
          {/* <Route path="/dashboard" component={Dashboard} /> */}
        </div>
      </HashRouter>
    );
  }
}

为什么这个方案能解决问题？ #

• 重写后的createHref会生成包含当前页面路径的绝对URL（比如/some/static/page#/），即使<base href="/">存在，浏览器也会正确跳转到React应用所在的页面，不会跳去根路径。
• HashRouter依然会基于hash部分解析路由，所以你现有的路由配置（比如path="/"）完全不需要修改，直接兼容原有代码。

替代方案：封装自定义Link组件 #

如果你不想改动history，也可以封装一个自己的Link组件，手动拼接当前页面路径：

import { Link as RouterLink } from 'react-router-dom';

// 自定义Link组件，自动添加当前页面路径
export const Link = ({ to, ...props }) => {
  const currentPath = window.location.pathname;
  // 处理to是字符串或者location对象的情况
  const hashPath = typeof to === 'string' ? to : to.pathname;
  const absoluteTo = `${currentPath}#${hashPath}`;
  
  return <RouterLink to={absoluteTo} {...props} />;
};

之后把项目中所有的<Link>替换成这个自定义组件即可。不过这种方式需要修改所有Link的引用，不如自定义history来得优雅。

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