React Router中已登录用户访问登录页重定向冲突解决问询

问题核心是：登录成功后页面仍处于/login路由下，此时RestrictedPublicRoute检测到token存在会立即重定向到首页，覆盖了登录逻辑中跳转到原受保护路由的操作。

解决方案 #

修改RestrictedPublicRoute的逻辑，区分用户是主动访问登录页还是被受保护路由重定向过来的：

export const RestrictedPublicRoute = () => {
  const { token } = useAuth();
  const location = useLocation();

  // 仅当用户主动访问登录页（无重定向来源）且已登录时，才重定向到首页
  if (token && !location.state?.from) {
    return <Navigate to="/" replace />;
  }

  return <Outlet />;
};

逻辑说明 #

• 当用户访问受保护路由（如/dashboard）时，ProtectedRoute会将其重定向到/login，并在location.state中携带from字段记录原路由地址。
• 用户登录成功后，登录逻辑读取location.state.from并跳转回原路由，此时RestrictedPublicRoute因检测到location.state.from存在，不会触发重定向，确保跳转正常完成。
• 若已登录用户直接通过地址栏输入/login访问，location.state中无from字段，RestrictedPublicRoute会触发重定向到首页，符合需求。

验证流程 #

1. 未登录状态下访问/dashboard，被重定向到/login，地址栏携带state参数记录原路由。
2. 完成登录后，成功跳转回/dashboard，无额外重定向。
3. 已登录状态下直接访问/login，自动重定向到首页。

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