React应用部署Firebase Hosting后刷新非根路由报错如何修复

这个错误是单页应用（SPA）部署到静态托管服务的典型问题：
React应用的路由逻辑是前端通过JavaScript在浏览器端实现的，服务器上并不存在/login这类路径对应的实体文件或目录。页面内跳转时是JS拦截路由动作、本地切换组件，不会向服务器发起对应路径的资源请求；但直接在非根路径刷新时，浏览器会直接向Firebase Hosting请求该路径的资源，Firebase默认找不到对应实体文件，也没有配置回退规则，就会抛出题目中的报错。

核心是配置Firebase Hosting的重写规则，让所有找不到对应静态资源的请求统一返回根目录的index.html，交给前端路由接管解析：

• 打开项目根目录下的firebase.json配置文件，若项目中还没有该文件，先在根目录执行firebase init hosting，按指引关联你的Firebase项目、配置好构建产物目录即可生成。
• 在hosting配置段中添加rewrites重写规则，注意保留原有已配置的public、ignore等字段不要删除，参考配置如下：

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

注：public字段的值要和你React项目的构建产物输出目录保持一致，CRA脚手架默认输出目录为build，Vite构建的React项目默认输出目录为dist，按实际情况修改即可。

• 配置修改完成后，在项目根目录执行firebase deploy --only hosting重新部署，部署生效后非根路径直接刷新就可以正常访问了。

补充说明：该重写规则不会影响静态资源的正常访问，Firebase Hosting会优先匹配路径对应的真实存在的静态文件，仅当文件不存在时才会触发重写返回index.html，完全适配单页应用的部署需求。

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