React项目部署Firebase后路由跳转404，如何修改firebase.json配置？

这是单页应用（SPA）部署在静态托管服务的典型问题。React使用客户端路由，所有页面逻辑都在入口index.html中处理，Firebase默认会根据请求路径找对应的静态文件，服务器上不存在/menu、/add这类实际的静态文件，所以返回404。

• 当前配置的rewrite规则只匹配/Menu/*路径，大小写敏感，和你路由中定义的小写/menu不匹配
• 仅覆盖了Menu路径，其他路由比如/add、/projekt等都没有匹配规则
• 目标地址配置错误，不应该指向路由路径，应该指向React应用的入口文件

直接替换你的firebase.json中hosting的rewrites字段即可，修改后的完整firebase.json如下：

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

• hosting.public：指定Firebase托管的静态资源根目录，React打包后的产物默认输出在build文件夹，这个配置不需要改动
• hosting.rewrites：URL重写规则，"source": "**"表示匹配所有请求路径，全部指向站点根目录的/index.html，交由React Router处理客户端路由，不需要为每个路由单独写规则

1. 保存修改后的firebase.json文件
2. 在项目根目录执行firebase deploy重新部署即可

• 建议统一路由路径的大小写，你当前路由配置中存在/Contact、/add-Evaluation这类大小写混合的路径，统一改为全小写可以避免不同环境大小写敏感导致的访问异常
• 如果使用HashRouter而不是BrowserRouter的话也可以避免这个问题，但URL会带#号，使用BrowserRouter的话用上面的重写规则即可

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