分离部署的MERN应用刷新URL跳转到根路由问题求助

你的问题核心是分离部署场景下，前端路由的刷新请求由Firebase Hosting处理，而非后端Heroku，之前修改后端server.js的通配路由无效，因为刷新时浏览器是向Firebase请求对应路径的资源，不是Heroku。

正确解决方案：配置Firebase Hosting重写规则 #

1. 打开前端项目中的firebase.json文件（如果没有，先通过firebase init初始化Hosting）
2. 在hosting节点下添加rewrites规则，将所有路径请求重定向到index.html，让React客户端路由接管：

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

3. 重新部署前端到Firebase：

firebase deploy --only hosting

额外说明 #

• 后端server.js中的通配路由可以删除，因为分离部署下，前端仅会通过API请求访问Heroku，页面路由请求不会到达后端。
• 确认你的React路由使用的是BrowserRouter（代码中的<Router>默认是BrowserRouter），如果是HashRouter不会出现此问题，但BrowserRouter更符合SEO友好的URL格式。
• 部署完成后，刷新example.com/123这类URL，Firebase会返回index.html，React会加载并匹配对应的客户端路由，不再跳转到根路径。

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