GitHub Pages添加React子页面遇404，用HashRouter仍无效求助

问题详情 #

已在GitHub Pages搭建好React页面，主页可正常访问，但子页面直接访问会跳转到404。已经使用HashRouter，但问题依旧：

• 主页地址：https://pjv17.github.io/frontend-assessment/
• 子页面地址：https://pjv17.github.io/frontend-assessment/exercise-2

项目代码 #

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { HashRouter } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.css";

ReactDOM.createRoot(document.querySelector("#fa-assessment-e1")).render(
  <React.StrictMode>
    <HashRouter>
      <App />
    </HashRouter>
  </React.StrictMode>
);

App.js

import React, { useEffect } from "react";
import "./App.scss";
import { Routes, Route } from "react-router-dom";
import Exercise1 from "./pages/Exercise1";
import Exercise2 from "./pages/Exercise2";

function PageTitle() {
  useEffect(() => {
    document.title = "Frontend Assessment | Exercise 1";
  }, []);
}

function App() {
  PageTitle();
  return (
    <div className="main">
      <Routes>
        <Route path="/" exact element={<Exercise1 />}></Route>
        <Route path="exercise-2" exact element={<Exercise2 />}></Route>
      </Routes>
    </div>
  );
}

export default App;

问题原因与解决方法 #

核心问题 #

使用HashRouter时，路由路径会包含#号，但当前访问的子页面地址是不带#的路径，GitHub Pages会把它当成真实的文件路径，找不到对应文件就返回404。

具体修复步骤 #

• 用React Router的Link组件跳转：所有页面跳转必须通过Link组件，而非直接输入不带#的URL。比如在Exercise1组件中添加跳转链接：

  import { Link } from "react-router-dom";
  
  // 示例代码
  <Link to="/exercise-2">前往Exercise2</Link>
  

  点击后URL会自动变为https://pjv17.github.io/frontend-assessment/#/exercise-2，这是HashRouter的正确路由格式。

• 直接访问子页面需带#：如果要直接访问子页面，必须使用带#的完整路由地址：

  https://pjv17.github.io/frontend-assessment/#/exercise-2
  

• 配置404页面自动重定向（可选）：为避免用户误输入不带#的URL看到404，在项目根目录创建404.html，内容如下：

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>Redirecting...</title>
      <script>
        const path = window.location.pathname;
        window.location.href = window.location.origin + '/frontend-assessment/#/' + path.split('/').pop();
      </script>
    </head>
    <body>
      Redirecting to the correct page...
    </body>
  </html>
  

  这样用户输入错误地址时会自动重定向到带#的正确路由。

• 确认路由配置：当前App.js的路由配置无问题，HashRouter会自动适配GitHub Pages的子路径部署，无需额外配置basename。

内容的提问来源于stack exchange，提问作者Never Stop Learning