React路由本地运行正常 部署到Firebase后部分路径跳转至首页

问题原因 #

1. 你当前使用的是React Router的BrowserRouter客户端路由模式，所有路由匹配逻辑都在前端代码中执行。本地开发环境默认配置了所有请求 fallback 到入口index.html，因此所有路径都能正常匹配路由。
2. Firebase Hosting 默认未配置单页应用所需的路由重写规则：当直接访问/search这类非根路径时，Firebase会优先尝试匹配服务器上的静态文件/目录，匹配失败才会走 fallback 逻辑。你遇到的部分路径正常、部分异常的情况，核心是firebase.json的托管配置不符合单页应用路由要求，也可能存在与路由路径同名的静态文件/目录干扰匹配。

解决步骤 #

1. 打开项目根目录下的firebase.json文件，修改hosting配置段，添加全局路由重写规则，确保所有路径请求都返回根目录的index.html，参考配置如下：

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

2. 配置完成后重新构建项目，再部署到Firebase即可生效：

npm run build
firebase deploy

额外排查方向 #

如果配置后仍存在部分路径异常，可检查两点：

• 确认项目构建输出的build目录下没有和路由路径同名的文件夹/文件，例如存在search目录时，Firebase会优先返回静态目录内容而非匹配路由规则
• 确认应用全局仅使用一个Router声明，没有出现HashRouter和BrowserRouter混用的错误写法

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