React站点刷新/直接访问页面404，Firebase托管下配置catch all方案求助

问题原因 #

React是单页应用(SPA)，所有路由逻辑都在前端处理。但Firebase Hosting默认会把每个URL请求映射到服务器上对应的文件，当你刷新页面或直接访问某个子路径时，服务器找不到对应文件，就返回404错误。要解决这个问题，需要让Firebase把所有请求都转发到index.html，交给React Router处理。

具体配置步骤 #

1. 配置Firebase Hosting的重写规则 #

在项目根目录找到或创建firebase.json文件，添加rewrites配置：

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

• source: "**"表示匹配所有路径请求
• destination: "/index.html"表示把所有请求都转发到主页面，由React Router处理路由

2. 修复React Router的404路由配置 #

你的代码里当前的404路由写法不规范，需要修改成匹配所有未定义路径的路由：
在AuthNavigator和MainNavigator的Routes里，把原来的<Route>{'404'}</Route>替换成：

<Route path="*" element={<div>404 - 页面不存在</div>} />

如果有专门的404页面组件，直接替换成对应的组件即可，比如<Route path="*" element={<NotFoundPage />} />

另外注意：你的路由里path="sign-in"应该改成path="/sign-in"，使用绝对路径避免嵌套路由的路径解析问题。

3. 重新构建并部署 #

修改完成后，重新构建生产版本：

npm run build

然后部署到Firebase：

firebase deploy

这样配置后，刷新页面或直接访问任意子路径时，Firebase会返回index.html，React Router就能正确匹配路由并渲染对应的页面，404路由也会在没有匹配到任何路径时生效。

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