React单页应用部署至Firebase后刷新任意页面出现404错误如何处理

API 探路者

2026-9-29

该文件不存在，且当前目录下未找到index.html，根目录中也不存在404.html。
您可能为应用部署了错误的目录，请检查firebase.json配置，确认public目录指向的文件夹包含index.html文件。
您也可以在站点根目录添加404.html文件，使用自定义错误页面替换当前默认提示页。

问题原因

React单页应用使用客户端路由逻辑，所有页面渲染逻辑都由入口index.html加载的JS代码控制。Firebase默认的静态文件服务逻辑会直接匹配请求路径对应的真实文件，刷新非首页路径时没有对应的静态文件存在，就会触发404报错。

解决方案

步骤1：验证基础配置正确性

检查项目根目录下的firebase.json中public配置项，确认指向的是React项目打包后的输出目录，默认为build文件夹
确认上述目标文件夹下存在打包生成的index.html文件

步骤2：添加重定向规则（核心修复）

在firebase.json的hosting配置块下添加rewrites规则，将所有请求全部重定向到入口index.html，完整配置示例如下：

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

配置修改完成后重新执行firebase deploy部署即可生效。