如何解决已认证用户访问/login先跳登录页再到Dashboard的路由问题

问题根因 #

原有身份校验逻辑写在Login组件内部，路由匹配到/login路径后会先渲染Login组件，执行组件内部逻辑时才触发重定向，因此会出现登录页一闪而过再跳转Dashboard的现象。

解决方案 #

通过路由层前置校验身份状态，匹配路由前就完成重定向判断，避免访客路由组件先渲染。

1. 封装两类路由守卫高阶组件

// 私有路由：仅已登录用户可访问，未登录自动跳转登录页
const PrivateRoute = ({ children, ...rest }) => {
  // 替换为你实际的登录状态判断逻辑，比如从redux、context中取状态
  const isAuthenticated = !!localStorage.getItem('user_token')
  return (
    <Route
      {...rest}
      render={({ location }) =>
        isAuthenticated ? (
          children
        ) : (
          <Redirect to={{ pathname: "/login", state: { from: location } }} />
        )
      }
    />
  )
}

// 访客路由：仅未登录用户可访问，已登录直接跳转Dashboard
const GuestRoute = ({ children, ...rest }) => {
  const isAuthenticated = !!localStorage.getItem('user_token')
  return (
    <Route
      {...rest}
      render={({ location }) =>
        !isAuthenticated ? (
          children
        ) : (
          <Redirect to={{ pathname: "/dashboard", state: { from: location } }} />
        )
      }
    />
  )
}

2. 调整路由配置

用封装好的守卫组件替换原有普通Route：

<Switch>
  <GuestRoute exact path="/login">
    <Login />
  </GuestRoute>
  <GuestRoute exact path="/signup">
    <Signup />
  </GuestRoute>
  <PrivateRoute exact path="/dashboard">
    <Dashboard />
  </PrivateRoute>
  {/* 可选：配置根路径默认跳转、404页面等兜底逻辑 */}
  <Redirect exact from="/" to="/dashboard" />
</Switch>

3. 清理冗余逻辑

删除Login、Signup组件内部已存在的「已登录状态下跳转Dashboard」的逻辑，避免重复执行。

若你使用React Router v6版本，路由API写法略有调整，核心的前置校验逻辑保持一致即可。

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