React路由权限优化：已登录用户跳转登录/注册页至仪表盘

需求明确 #

现有路由分为Public（公共）和Private（私有）两类：

• 私有路由：仅对已登录用户开放，无token时跳转至/login（当前逻辑已实现）
• 公共路由：需新增限制——已登录用户访问/login、/registration时自动重定向至/dashboard，/terms、/privacy等其他公共路由仍允许所有用户访问

核心实现思路 #

在PublicRoute组件中集中处理逻辑：

1. 检测用户是否已登录（通过tokenService.token判断）
2. 若已登录，检查当前访问的路径是否为/login或/registration
3. 符合条件则重定向至/dashboard，否则正常渲染公共路由内容；未登录则直接渲染所有公共路由

代码修改（仅需更新PublicRoute） #

import { useLocation, Navigate } from 'react-router-dom';
// 导入你的tokenService、AuthHeader、Suspense、Spinner、Outlet、Footer等依赖

const PublicRoute = () => {
  const { pathname } = useLocation();
  const isLoggedIn = !!tokenService.token;

  // 已登录用户访问登录/注册页时触发重定向
  if (isLoggedIn && ['/login', '/registration'].includes(pathname)) {
    return <Navigate to="/dashboard" replace />;
  }

  // 其他情况正常渲染公共路由布局
  return (
    <>
      <AuthHeader />
      <Suspense fallback={<Spinner className="spinner" />}>
        <Outlet />
      </Suspense>
      <Footer />
    </>
  );
};

export default PublicRoute;

方案优势 #

• 集中管理：所有公共路由的权限逻辑都在PublicRoute中处理，无需在Login、Registration组件内单独编写重定向代码，维护成本低
• 高效简洁：通过数组includes快速匹配目标路径，逻辑清晰性能优
• 体验优化：使用replace属性替换路由历史，避免用户通过浏览器回退按钮再次进入登录/注册页

验证说明 #

1. 未登录状态：可正常访问所有公共路由（/login、/registration、/terms等）
2. 已登录状态：
   • 访问/login或/registration会自动跳转到/dashboard
   • 访问/terms、/privacy仍可正常进入
   • 私有路由（如/dashboard）保持原有逻辑不变

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