ReactJS项目部署GitHub Pages遭遇404错误求助

针对你遇到的问题，核心原因是GitHub Pages作为静态托管服务，无法处理React单页应用（SPA）的客户端路由请求。以下是具体解决方法：

方法一：使用HashRouter（最简单直接） #

React Router的HashRouter会通过URL中的#隔离客户端路由，服务器仅解析#之前的路径，避免触发404。修改路由配置：

import { HashRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Homepage />} />
        <Route path="/aboutus" element={<AboutUs />} />
        <Route path="/appointment" element={<Form/>} />
      </Routes>
    </Router>
  );
}

修改后重新构建并部署：

npm run build
npm run deploy

此时访问路径会变成https://mywebsite.github.io/mywebsite/#/aboutus，可正常渲染页面且无404问题。

方法二：使用BrowserRouter并配置basename与404页面 #

若想保留无#的URL格式，按以下步骤操作：

1. 设置BrowserRouter的basename
   确保路由前缀与GitHub Pages仓库名一致：

   import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
   
   function App() {
     return (
       <Router basename="/mywebsite">
         <Routes>
           <Route path="/" element={<Homepage />} />
           <Route path="/aboutus" element={<AboutUs />} />
           <Route path="/appointment" element={<Form/>} />
         </Routes>
       </Router>
     );
   }
   

2. 添加404.html文件
   在项目public目录下创建404.html，完全复制public/index.html的内容。当服务器找不到对应路径时，会返回该文件，加载React应用后客户端路由即可正确渲染页面。

3. 重新构建部署
   执行构建部署命令：

   npm run build
   npm run deploy
   

额外检查项 #

• 确认package.json中的homepage设置正确："homepage": "https://mywebsite.github.io/mywebsite"，该配置会让react-scripts自动处理build后资源的相对路径。
• 登录GitHub仓库设置页面，确认Pages选项中部署分支为gh-pages，根目录选择/(root)。

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