React配置受保护路由后未登录跳转报错、更新深度超限问题

两个配置错误直接触发无限重定向死循环，对应你看到的两个报错：

• 外层<ProtectedRoute>放错了位置：你把包裹<Sidebar />的路由守卫直接放在了<Routes>组件外层，脱离了React Router v6的路由匹配上下文。路由守卫逻辑本身会在未登录时触发跳转，放在Routes外层会导致跳转完成后守卫逻辑重复执行，反复触发重定向。
• 侧边栏挂载逻辑不符合路由嵌套规则：登录、注册属于公开路由，本身不需要挂载侧边栏，你单独放在外层的守卫只要检测到未登录，就会反复重定向到/登录页，形成跳转→校验未登录→再跳转的死循环，最终触发浏览器导航节流保护、React最大更新深度超限警告。
  登录后功能正常是因为登录状态下守卫不会触发重定向，死循环条件不成立，但侧边栏的挂载逻辑依然不符合路由设计规范。

删除Routes外层单独放置的<ProtectedRoute>和<Sidebar />，用布局路由+嵌套路由的官方推荐写法实现需求：

1. 先定义受保护的全局布局组件，内部统一挂载侧边栏和子路由出口，所有登录后可见的页面都走这个布局：

import { Outlet } from 'react-router-dom'

// 登录后全局生效的布局
const ProtectedAppLayout = () => {
  return (
    <ProtectedRoute>
      <div className="app-layout">
        <Sidebar />
        {/* 子路由内容的渲染出口，必须加 */}
        <div className="page-content">
          <Outlet />
        </div>
      </div>
    </ProtectedRoute>
  )
}

2. 重构路由配置，把需要登录访问的页面全部作为ProtectedAppLayout的子路由，公开路由（登录、注册）单独放在外层，不嵌套受保护布局：

<AuthContextProvider>
  <Router>
    <Routes>
      {/* 公开路由：无侧边栏，无需登录 */}
      <Route path="/" element={<Signin />} />
      <Route path="/signup" element={<Signup />} />

      {/* 受保护路由组：自动带侧边栏，未登录会被拦截 */}
      <Route element={<ProtectedAppLayout />}>
        <Route path="/about-us" element={<Account />} />
        {/* 后续新增的需要登录的页面，全部放在这个路由组下即可 */}
      </Route>
    </Routes>
  </Router>
</AuthContextProvider>

• 未登录状态下访问登录、注册页：不渲染侧边栏，页面间跳转无卡顿、无控制台报错
• 未登录状态下访问受保护页面：自动拦截跳转到登录页，不会触发死循环
• 登录后访问所有受保护页面：侧边栏正常显示，路由跳转逻辑正常

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