React Router v6故障：已认证用户仅能访问首页无法进入其他子页面

故障核心是3处路由配置错误：

1. 你提前封装的AuthRoute、DashboardRoute两个子路由模块，完全没有在主路由AppRouter中挂载使用，属于无效代码
2. 已认证分支的路由表仅注册了两个规则：/路径渲染HomePage、其余所有路径/*直接重定向到/，根本没有给history、contact路径预留匹配规则，访问这两个地址时会直接被通配规则拦截跳回首页
3. 父路由挂载子路由模块时，路径后缀没有加/*做路径透传，即使挂载了子路由，子路由内部的<Routes>也拿不到剩余路径参数，无法完成匹配

• 主路由分支逻辑中，不要直接渲染单个页面组件，对应认证状态下挂载提前封装好的子路由模块，父级匹配路径必须加/*后缀，把匹配到前缀后的剩余路径透传给子路由内部处理
• 子路由内部匹配根路径时，优先用index路由做相对匹配，不要硬写绝对路径/，避免嵌套场景下路径匹配错位
• 所有重定向组件添加replace属性，清除路由栈中无效的重定向记录，避免浏览器返回按钮触发循环跳转

主路由AppRouter #

export const AppRouter = () => {
  // 省略原有状态获取逻辑
  if (status === authStatusConst.CHECKING) {
    return <h3>Loading...</h3>
  }    
  return (
    <Routes>
      {
        status === authStatusConst.UNAUTHENTICATED
          ? (
              <>
                <Route path="/auth/*" element={ <AuthRoute /> } />
                <Route path="/*" element={ <Navigate to="/auth/signIn" replace /> } />
              </>
          )
          : (
              <>
                <Route path="/*" element={ <DashboardRoute /> } />
              </>
          )
      }
    </Routes>
  )
}

仪表盘路由DashboardRoute #

export const DashboardRoute = () => {
  return (
    <Routes>
        <Route index element={<HomePage />} />
        <Route path="history" element={<HistoryPage />} />
        <Route path="contact" element={<ContactPage />} />
        <Route path="*" element={<Navigate to="/" replace />} />
    </Routes>
  )
}

认证路由AuthRoute #

export const AuthRoute = () => {
  return (
    <Routes>
        <Route path="signIn" element={<SignInPage />} />
        <Route path="signUp" element={<SignUpPage />} />
        <Route path="*" element={<Navigate to="/auth/signIn" replace />} />
    </Routes>
  )
}

修复后可实现预期逻辑：未认证用户访问任意非/auth前缀地址自动跳登录页，可正常访问注册、登录页面；已认证用户可正常访问首页、历史页、联系页，访问不存在的地址自动跳回首页。

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