React+Firebase应用使用react-router-dom时URL访问始终404

1. Firebase Hosting 单页应用路由配置缺失 #

这是React SPA部署到Firebase后出现404的核心原因之一。Firebase Hosting默认会根据请求路径查找对应静态文件，而React的前端路由是在浏览器端处理的，直接访问/login这类路由时，Firebase找不到对应的静态资源，就会返回404。

解决方法：
在项目根目录的firebase.json文件中添加rewrites配置，将所有请求重定向到index.html，交给React Router处理路由：

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

配置完成后重新部署：firebase deploy --only hosting

2. React Router 嵌套路由路径配置问题 #

你的AuthenticationRoutes中子路由使用了绝对路径（/login），在useRoutes的嵌套路由结构里，子路由应该用相对路径（去掉开头的斜杠，写成login），否则会绕过父路由的MinimalLayout直接匹配根路径下的路由，可能引发匹配异常。

修改后的AuthenticationRoutes代码：

const AuthenticationRoutes = {
    path: '/',
    element: <MinimalLayout />,
    children: [
        {
            path: 'login', // 改为相对路径
            element: <AuthLogin3 />
        },
        {
            path: 'register',
            element: <AuthRegister3 />
        },
        {
            path: 'onboarding',
            element: <Onboarding />
        }
    ]
};

3. 额外检查项 #

• 确认项目构建正常：执行npm run build后，build目录下是否生成完整的静态文件，尤其是index.html。
• 检查路由冲突：确认MainRoutes中是否也定义了/login这类路由，导致匹配优先级混乱。
• 清除浏览器缓存：旧缓存可能干扰路由匹配，可通过强制刷新（Ctrl+F5）测试。

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