Firebase Hosting部署SPA遇ERR_TOO_MANY_REDIRECTS及动态路由问题

哈哈，这个坑我之前也踩过！你现在的问题根源太明显——那个redirect配置完全是在搞“自己重定向自己”，浏览器收到请求后被要求跳去同一个URL，反复循环可不就报ERR_TOO_MANY_REDIRECTS嘛😅

正确的配置思路：用Rewrite而非Redirect #

React SPA的路由是前端路由，所有路径（包括带动态参数的/home/:id）都需要交由React Router来解析，而不是让Firebase Hosting做重定向。正确的做法是用rewrites规则，让Firebase把所有非静态资源的请求都转发到index.html，由React应用来处理路由逻辑。

修正后的firebase.json配置 #

把你原来的redirects替换成rewrites，完整配置如下：

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

为什么之前用Rewrite会出现404？ #

你之前尝试rewrite出现404，大概率是这两个原因之一：

• 没有正确执行npm run build：确认你已经在项目根目录运行了构建命令，生成了完整的build文件夹，里面必须包含index.html文件
• Rewrite规则范围太窄：如果只写了/home/:id作为source，那其他路由（比如/about）或者更深的路径还是会返回404，用**作为source可以覆盖所有非静态资源的请求（Firebase会自动忽略已存在的静态文件，比如CSS、JS、图片等）

验证配置 #

修改完firebase.json后，重新部署到Firebase：

firebase deploy --only hosting

之后再访问https://www.example.com/home/123这类动态路径，React Router就能正确解析:id参数，既不会有重定向循环，也不会返回404了。

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