React Router v6结合Moralis API实现私有路由代码不生效问题

你的路由守卫逻辑失效核心是两个问题：

• useMoralis() 返回的isAuthenticated是异步更新的状态：Moralis SDK初始化时会优先校验本地存储的会话凭证、拉取用户身份信息，整个初始化流程完成前，isAuthenticated的默认值固定为false。哪怕用户实际已经登录，组件首次渲染时拿到的也是未认证状态，会直接触发跳转，等后续SDK完成校验把isAuthenticated更新为true时，路由已经跳转到首页，自然不符合预期。
• 跳转逻辑未处理路由栈问题：默认情况下<Navigate />会向浏览器历史栈新增一条记录，跳转后用户点击返回按钮会回到守卫页再次触发跳转，形成死循环，这是附带的逻辑bug。

首先要引入Moralis提供的初始化加载状态，等身份校验完全完成后再做路由判断，不要在加载阶段直接执行跳转逻辑：

const ProtectedRoutes = () => {
  // 注意：不同版本react-moralis的加载状态字段名可能是isLoading，可打印返回值确认
  const { isAuthenticated, isInitializing } = useMoralis();

  // 身份校验阶段渲染加载占位，避免误判登录状态
  if (isInitializing) {
    return <div>身份校验中...</div>; // 可替换为项目内的全局加载组件、骨架屏
  }

  // 校验完成后再执行放行/跳转逻辑，加replace替换当前路由记录避免死循环
  return isAuthenticated ? <Outlet /> : <Navigate to="/" replace />;
};

你的路由嵌套写法本身符合React Router v6的规范，不需要调整：

return (
  <Routes>
    <Route path={ROUTER_PATHS.SIGNUP} element={<Signup />} />
    <Route element={<ProtectedRoutes />}>
      <Route path={ROUTER_PATHS.EMPLOYER} element={<MarketPlaceEmployer />} />
      <Route path={ROUTER_PATHS.EMPLOYEE} element={<MarketPlaceEmployee />} />
    </Route>
  </Routes>
);

如果调整后还是存在状态不同步问题，可以检查Moralis的初始化配置：确认<MoralisProvider>已经包裹在<BrowserRouter>外层，保证路由组件能正常拿到完整的Moralis状态。

内容的提问来源于stack exchange，提问作者Joe Ellul-Turner