部署React项目到GitHub Pages时路径错误致页面404求助

问题根源 #

你用原生<a>标签跳转路由时，浏览器会直接向GitHub Pages服务器请求对应路径的文件，但GitHub Pages仅存在index.html这一个入口文件，没有/videogame或/shoppingcart对应的静态资源，因此返回404。另外你虽然用了HashRouter，但链接未适配hash模式的客户端路由逻辑。

修复步骤 #

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

React Router提供的Link组件会在客户端处理路由跳转，不会发起新的服务器请求，完美适配GitHub Pages的静态部署环境：

// 先导入Link组件
import { Link } from 'react-router-dom';

const Header = () => {
  return (
    <div className="header">
      <Link className="active" to="/">
        Home
      </Link>
      <Link to="/videogame">Video Games</Link>
      <Link to="/shoppingcart">Shopping Cart</Link>
    </div>
  );
};

2. 确认HashRouter配置有效性 #

你的RouteSwitch.js中HashRouter和路由路径配置是正确的，HashRouter会自动在URL中添加#（比如https://USERNAME.github.io/shopping-cart/#/videogame），这是适配GitHub Pages最省心的路由模式，无需额外服务器配置。

3. 重新部署项目 #

修改完成后，执行部署命令更新在线站点：

npm run deploy

额外检查项 #

• 确保package.json里的homepage配置末尾斜杠未遗漏
• 本地先用npm start测试路由跳转正常后，再执行部署

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