React Router配置实现URL记忆及部署后刷新不404问题咨询

这个需求完全可实现，对应问题是GitHub Pages静态服务器的路由匹配逻辑导致，和React Router本身功能无关。

GitHub Pages属于静态文件托管服务，所有访问请求都会直接匹配服务器上真实存在的物理文件/目录：

• 你通过React Router的<Link>组件跳转时，仅由前端JS修改浏览器URL、不发起服务器请求，所以可以正常加载对应页面
• 刷新页面或直接输入/page/x路径访问时，浏览器会向GitHub Pages服务器发起该路径的请求，服务器根目录下不存在page/x对应的文件，就会返回404错误

分两种常用方案，可根据需求选择：

方案1：使用HashRouter（最简单，无额外配置） #

将你当前使用的BrowserRouter替换为HashRouter即可，修改成本极低：

1. 修改路由引入代码：

// 替换前
import { BrowserRouter as Router } from 'react-router-dom'
// 替换后
import { HashRouter as Router } from 'react-router-dom'

2. 无需修改其他路由配置，重新打包部署即可生效

该方案生成的URL会携带#标识，例如https://用户名.github.io/仓库名/#/page/1，#后的内容不会发送到服务器，GitHub Pages只会请求根目录的index.html，后续路由匹配由React Router前端自行处理，不会出现404问题。

方案2：适配BrowserRouter（无#的干净URL） #

如果不希望URL出现#，可以通过GitHub Pages的自定义404规则实现：

1. 在项目public目录下新建404.html文件，文件内容和同目录下的index.html完全一致
2. 在项目package.json中添加homepage字段，配置为你的GitHub Pages访问地址：

{
  "homepage": "https://你的GitHub用户名.github.io/你的仓库名/"
}

3. 在React路由配置的最底部，添加全路径匹配规则，避免非法路径无对应组件渲染：

<Routes>
  {/* 其他已有路由 */}
  <Route path="*" element={<NotFound />} />
</Routes>

4. 重新打包项目，推送到GitHub Pages对应分支即可生效

该方案利用了GitHub Pages遇到不存在路径时返回自定义404页面的规则，将所有请求都导回index.html，再由React Router前端匹配正确路由。

• 两种方案都可以实现路由状态记忆、URL跟随页面自动更新的需求
• 修改配置后需要重新执行npm run build，并将build目录内容推送到GitHub Pages对应的gh-pages分支才会生效
• 若你后续将应用部署到Nginx等其他静态服务器，只需配置try_files $uri $uri/ /index.html;即可实现BrowserRouter的正常访问，不需要额外新增404.html文件

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