React项目本地运行正常，Firebase部署后自定义路由返回404如何解决？

这个问题是客户端路由与静态托管服务的请求匹配逻辑冲突导致的：

• 本地npm start启动的是React开发服务器，默认会把所有路径的请求都返回根目录的index.html，前端React Router可以正常接管路由匹配，因此自定义路径可以正常访问
• Firebase Hosting默认按请求路径查找对应的静态文件，访问/coaching这类路径时，服务端会尝试查找build/coaching.html或build/coaching/index.html，找不到就返回404。你当前配置的rewrites规则是把所有请求转发到名为ssr的云函数，如果你没有提前部署对应的ssr云函数，请求会直接失败返回404

1. 替换firebase.json的rewrites配置，把所有请求重写到根目录的index.html，正确配置如下：

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

2. （可选优化）如果你的React Router版本为v5，建议给首页路由添加exact属性，避免路由优先级问题导致所有路径都匹配到首页：

<Router>
  <Switch>
    <Route path="/coaching">
      <Coaching />
    </Route>
    <Route exact path="/">
      <FrontPage />
    </Route>
  </Switch>
</Router>

3. 重新执行打包和部署流程：

npm run build
firebase deploy

如果修改后仍出现404，按以下顺序排查：

• 确认firebase.json存放在项目根目录，public字段指向的确实是React打包输出的build文件夹
• 检查是否有其他rewrites规则优先级高于上述配置
• 确认部署时打包命令执行成功，build目录下存在index.html文件

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