部署集成react-router-dom 6的React应用至GitHub时路由404求助

你的问题核心在于GitHub Pages是静态文件服务器，无法识别React单页应用的前端路由规则，直接访问非根路径时会返回404。以下是两种针对性解决方案：

方案一：正确使用HashRouter #

HashRouter依赖URL的哈希片段（#后内容）处理路由，这部分不会被服务器解析，完全由前端处理。

1. 修正访问方式：不要直接访问https://bonafo.github.io/perro，改为访问https://bonafo.github.io/#/perro即可正常渲染对应组件。
2. 优化代码配置：移除HashRouter不必要的basename="/"（根路径下默认生效），代码调整后如下：

import { HashRouter, Route, Routes } from "react-router-dom";
export default function App() {
  return (
    <div>
      <HashRouter>
          <Routes>
            <Route path="/" element={<h1>FJSDHNAOUSHSDOASHJNDAOIS</h1>} />
            <Route
              path="/perro"
              element={
                <img src="https://www.laguiadelvaron.com/wp-content/uploads/2018/03/facebook-omnitrix7-1520172526.jpg" alt="dog" />
              }
            />
          </Routes>
      </HashRouter>
    </div>
  );
}

方案二：使用BrowserRouter并配置404重定向 #

如果想要不带#的干净路径，需要让GitHub Pages将所有路由请求转发给index.html处理：

1. 修改Router配置：替换为BrowserRouter，用process.env.PUBLIC_URL自动匹配package.json的homepage配置：

import { BrowserRouter, Route, Routes } from "react-router-dom";
export default function App() {
  return (
    <div>
      <BrowserRouter basename={process.env.PUBLIC_URL}>
          <Routes>
            <Route path="/" element={<h1>FJSDHNAOUSHSDOASHJNDAOIS</h1>} />
            <Route
              path="/perro"
              element={
                <img src="https://www.laguiadelvaron.com/wp-content/uploads/2018/03/facebook-omnitrix7-1520172526.jpg" alt="dog" />
              }
            />
          </Routes>
      </BrowserRouter>
    </div>
  );
}

2. 创建404.html文件：在项目public目录下新建404.html，实现404时自动重定向到index.html并保留路径：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Redirecting...</title>
    <script>
        const path = window.location.pathname;
        window.location.replace(`/${path}`);
    </script>
</head>
<body>
    若未自动跳转，请点击<a href="/">返回首页</a>
</body>
</html>

3. 重新部署：执行npm run deploy重新发布应用即可。

额外注意事项 #

• 你的package.json中homepage配置"https://bonafo.github.io/"是正确的，无需修改。
• 线上路由需部署到GitHub Pages后测试，本地开发环境的路由逻辑与静态服务器存在差异。

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