React Router问题：已登录状态访问/login仍跳转至登录页需优化

核心逻辑是在登录页的路由入口处添加登录状态校验，已登录用户直接重定向到首页，未登录用户正常进入登录组件。以下是主流框架的实现示例：

React（React Router） #

封装路由守卫组件，拦截登录页访问请求：

import { Navigate, Outlet } from 'react-router-dom';

const LoginRoute = () => {
  // 根据项目实际登录状态判断逻辑调整，比如从localStorage/context/redux取登录标记
  const isLoggedIn = localStorage.getItem('userToken') !== null;

  if (isLoggedIn) {
    // 已登录则强制跳转到首页，replace避免回退到登录页
    return <Navigate to="/" replace />;
  }
  // 未登录正常渲染登录组件
  return <Outlet />;
};

// 路由配置中使用
const router = createBrowserRouter([
  {
    path: '/auth/login',
    element: <LoginRoute />,
    children: [
      { path: '', element: <LoginComponent /> }
    ]
  },
  // 其他路由配置
]);

Vue（Vue Router） #

在登录路由的beforeEnter钩子中做状态校验：

const routes = [
  {
    path: '/auth/login',
    component: Login,
    beforeEnter: (to, from, next) => {
      // 实际项目中替换为真实的登录状态判断逻辑
      const isLoggedIn = !!localStorage.getItem('userToken');
      if (isLoggedIn) {
        next('/'); // 已登录跳转到首页
      } else {
        next(); // 未登录允许进入登录页
      }
    }
  },
  // 其他路由配置
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

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