React Router 6在GitHub Pages嵌套路由404，求无#解决方案

为什么直接访问嵌套路由会404？ #

GitHub Pages是静态文件托管服务，当你直接访问https://amir248.github.io/site-amir/location这类嵌套路由时，服务器会尝试在项目根目录下寻找名为location的文件或文件夹，但你的React项目是单页应用（SPA），所有路由逻辑都在客户端浏览器处理，服务器上根本不存在这个资源，所以直接返回404错误。

而HashRouter的工作逻辑是把路由信息放在URL的#后面，比如https://amir248.github.io/site-amir/#/location——浏览器会将#后的内容视为锚点，不会发送给服务器，服务器只会返回根目录的index.html，之后React Router在客户端解析#后的路径，就能正确渲染对应组件，因此不会出现404。

无#符号的替代方案（适配BrowserRouter） #

如果不想用HashRouter的#链接，可以通过以下两步配置实现BrowserRouter的正常工作：

1. 配置React Router的basename #

在Router初始化时，设置basename为你的GitHub Pages项目名称（即/site-amir），确保路由路径与项目部署路径匹配：

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

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter basename="/site-amir">
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

同时修改组件内的Link路径，无需手动拼接项目名称，直接写相对路由即可：

// 原写法
<Link to={`/site-amir/`}>home</Link>
// 修改后
<Link to="/">home</Link>

2. 添加404重定向文件 #

在项目的public目录下创建404.html文件，内容完全复制index.html的内容。当GitHub Pages找不到对应资源时，会返回这个404.html，此时React Router就能在客户端接管页面，解析正确的路由路径。

另外要确保package.json中配置了正确的homepage字段：

{
  "homepage": "https://amir248.github.io/site-amir/"
}

完成以上配置后，重新打包并部署到GitHub Pages，就能直接访问嵌套路由而不出现404，且URL中不会带有#符号。

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