Firebase部署React项目后路由404问题求助：/product-type/laptop路径失效

这是因为Firebase Hosting默认会把请求当作静态文件路径查找，而React路由属于客户端路由，除根路径(/)对应的index.html外，其他路由路径在Firebase服务器上没有对应的实体文件，因此返回404错误。只需配置Firebase的重写规则，让所有路由请求都指向index.html，交由React Router处理即可解决。

具体操作步骤：

1. 找到项目根目录下的firebase.json文件（若没有，先通过firebase init初始化Firebase项目生成）
2. 修改hosting配置块，添加rewrites规则：

{
  "hosting": {
    "public": "build", // 对应React项目构建产物目录，Create React App默认是build，Vite默认是dist，需根据实际修改
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

3. 重新部署项目：

npm run build # 先重新构建React项目
firebase deploy --only hosting

额外注意事项：

• 确保React路由使用的是BrowserRouter（而非HashRouter），重写规则仅对BrowserRouter的路径生效；若使用HashRouter虽能避免404，但URL会带有#后缀。
• 确认public字段指向的构建目录正确，否则会导致部署的资源路径错误。

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