React应用HashRouter在本地及GitHub Pages导航异常问题

我之前也碰到过一模一样的情况，你的问题核心出在导航链接的实现方式上，和HashRouter的basename配置关系不大，咱们一步步来搞定：

问题根源 #

你的Header组件里大概率用了原生的<a>标签做导航（比如<a href="/blog">Blog</a>），这种方式和HashRouter的路由机制完全不兼容：

• HashRouter是基于URL中#后面的片段（hash部分）来匹配路由的
• 原生<a>标签会把href的路径直接拼在当前URL的主路径部分，而不是#后面，所以才会出现localhost:3000/blog#/这种错位的路径

解决方案 #

1. 用React Router的<Link>组件替换原生<a>标签 #

在Header组件里导入react-router-dom的Link组件，把所有导航链接改成<Link>：

// Header.js
import { Link } from 'react-router-dom';

function Header() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/blog">Blog</Link>
      <Link to="/jargons">Jargons</Link>
      <Link to="/tutorials/javascript">JS Tutorials</Link>
      <Link to="/tutorials/solidity">Solidity Tutorials</Link>
    </nav>
  );
}

<Link>组件会自动适配HashRouter的规则，把目标路径加到#后面，生成正确的URL（比如localhost:3000/#/blog）。

2. 简化HashRouter的basename配置 #

你的package.json里homepage已经设为根域名https://block-by-block.github.io，所以HashRouter的basename不需要额外拼接process.env.PUBLIC_URL，直接设为"/"即可（甚至可以省略，因为默认值就是"/"）：

// Home.js 修改后的Router部分
<Router basename="/">
  <Header />
  <Switch>
    <Route path="/" exact component={HODL} />
    <Route path="/blog" component={Blog} />
    <Route path="/tutorials/javascript" component={JavaScript} />
    <Route path="/tutorials/solidity" component={Solidity} />
    <Route path="/jargons" component={Jargons} />
  </Switch>
</Router>

验证效果 #

修改完成后本地启动项目测试：

• 点击导航链接，URL会变成localhost:3000/#/blog这种正确格式
• 页面也会正常跳转到对应的组件
  部署到GitHub Pages后，这个问题也会同步解决，因为<Link>组件会自动适配GitHub Pages的环境生成正确的hash路由路径。

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