React路由部署至Firebase Hosting后失效，子路由报页面找不到错误

这是因为Firebase Hosting默认会将所有请求视为静态资源请求，而你用的BrowserRouter（包括createBrowserRouter）属于客户端路由——当用户直接访问/about这类子路由时，Firebase服务器会去寻找对应的静态文件（比如about.html），找不到就返回404。

解决方法很简单，只需在项目根目录的firebase.json中添加重写规则，让所有请求都指向React的入口文件index.html：

1. 如果还没有firebase.json，直接在项目根目录创建这个文件
2. 写入以下配置：

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

配置说明：

• public指定的是React构建后的静态资源目录（默认是build，如果你的项目用的是其他目录比如dist，对应修改即可）
• rewrites规则告诉Firebase，不管用户访问任何路径，都返回index.html，这样React的客户端路由就能接管路径解析，正确渲染对应的组件。

最后重新执行构建命令（npm run build），再用firebase deploy重新部署即可解决子路由404的问题。

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