GitHub Pages中React路由子文件夹外部链接无法访问求助

问题原因 #

站内跳转正常是因为React Router在客户端完成路由匹配，但直接访问子路径（如/events）时，GitHub Pages的静态服务器会尝试寻找对应路径的物理文件（比如events/index.html），而React单页应用只有根目录的index.html，因此返回404。

解决方案 #

方案1：添加_redirects文件（推荐，无URL后缀） #

在项目的public目录下创建名为_redirects的文件（无任何后缀），写入以下内容：

/* /index.html 200

该文件会告知GitHub Pages服务器，将所有路径的请求都重定向到根目录的index.html，由React Router处理路由匹配。

执行npm run build后，该文件会被自动复制到build目录，重新部署到GitHub Pages即可生效。

方案2：改用HashRouter #

如果可以接受URL中带有#，可以将BrowserRouter替换为HashRouter，修改index.js代码：

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <HashRouter>
    <Routes>
        <Route path="/" element={<App/>}/>
        <Route path="/team" element={<Team/>}/>
        <Route path="/events" element={<Events/>}/>
        <Route path="/gallery" element={<Gallery/>}/>
        <Route path="/shop" element={<Shop/>}/>
    </Routes>
  </HashRouter>
);

这种方式下，所有路由都会基于根URL的哈希值（如www.nitesout.us/#/events），服务器始终请求根目录的index.html，不会出现404问题。

方案3：添加404.html文件 #

在public目录下创建404.html，完全复制public/index.html的内容。当GitHub Pages找不到对应路径时，会返回该文件，React应用加载后会由Router匹配正确的路由页面。

部署时确保404.html被包含在build目录中即可。

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