在Firebase部署React应用后点击链接出现404页面问题排查

问题现象 #

React应用部署到Firebase后，登录页面可正常访问，但点击其他页面链接时返回404错误。本地使用npm start运行应用完全正常，通过firebase serve本地模拟部署也无此问题。

部署配置信息 #

Firebase CLI初始化交互记录 #

? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No
? File build/index.html already exists. Overwrite? No

firebase.json配置 #

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

解决步骤 #

• 先通过npm start确认本地应用运行正常，无路由问题
• 执行npm run build重新构建生产包
• 重新执行firebase deploy完成部署
• 访问出现404的页面（如/home），手动刷新页面后恢复正常访问

推测原因 #

初步推测是Firebase部署后，路由重写规则的生效存在延迟，导致刚部署完成时非首页路由无法正确映射到index.html，刷新后缓存更新，规则生效。

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