如何在React中构造私有路由？使用PrivateRoute后Dashboard无法跳转如何解决

一、核心错误点（优先排查） #

你当前的PrivateRoute组件存在逻辑缺失：匹配路由后没有渲染传入的目标组件，只返回了空的Route标签，所以登录后即使匹配到/dashboard路径也不会渲染Dashboard页面。

二、逐步排查清单 #

• 验证useAuth()返回的user状态是否正确
  登录成功后在PrivateRoute组件内打印user值，确认登录后user为非空的真值，排除认证状态未同步、本地存储读取失败的问题
• 验证路由跳转逻辑是否正确
  登录成功后的重定向逻辑是否指向/dashboard，检查路径拼写是否错误，是否因exact属性配置错误导致路径匹配失败
• 验证PublicRoute逻辑（如果后续给Login路由封装PublicRoute需注意）
  你当前PublicRoute的判断逻辑存在问题：user && restricted时重定向到/login不符合业务逻辑，已登录用户访问限制路由（比如登录页）应该重定向到首页或者Dashboard页，而非登录页。

三、修复代码 #

修复后的PrivateRoute #

export const PrivateRoute = ({ component: Component, ...rest }: any) => {
  const { user } = useAuth();
  return (
    <Route
      {...rest}
      render={(props) => 
        user ? <Component {...props} /> : <Redirect to="/login" />
      }
    />
  );
};

和你PublicRoute的写法逻辑对齐即可，核心是要把传入的目标组件渲染出来。

（可选）修复PublicRoute逻辑 #

export const PublicRoute = ({
  component: Component,
  restricted,
  ...rest
}: any) => {
  const { user} = useAuth();
  return (
    <Route
      {...rest}
      render={(props) =>
        user && restricted ? (
          // 已登录用户访问限制路由（比如登录页）跳转到Dashboard
          <Redirect to="/dashboard" />
        ) : (
          <Component {...props} />
        )
      }
    />
  );
};

（可选）Login路由替换为PublicRoute #

修改App.tsx里的Login路由配置，避免已登录用户重复访问登录页：

<PublicRoute restricted={true} component={Login} path="/login" exact />

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