React Router Dom v6实现登录态路由重定向的正确方法

v6 版本已移除 v5 中的 <Redirect /> 组件，统一使用 <Navigate /> 组件处理重定向逻辑，对应你要实现的「已登录用户访问/login自动跳首页」需求，有以下几种实现方式：

直接修改路由配置（最简方案） #

你当前的嵌套index路由写法可以直接简化，把登录态判断写到路由的element属性中即可，不需要额外嵌套结构：

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

<Route 
  path="/login" 
  element={user ? <Navigate to="/" replace /> : <LoginStandard />} 
/>

注意：<Navigate /> 上的replace属性会替换当前历史栈记录，和v5中<Redirect />的默认行为一致，避免用户点击浏览器返回键时重复跳回/login页造成循环，登录重定向场景建议始终加上该属性。

如果你要保留当前的嵌套路由结构，只需要把条件判断移到index子路由的element属性上即可：

<Route path="/login">
  <Route 
    index 
    element={user ? <Navigate to="/" replace /> : <LoginStandard />} 
  />
</Route>

封装通用路由组件（适合多路由复用场景） #

如果项目里有多个游客可访问、登录后需要重定向的路由（比如注册页、忘记密码页），可以封装通用的游客路由组件统一处理逻辑，减少重复代码：

// 游客路由组件：仅未登录用户可访问，已登录自动跳首页
const GuestRoute = ({ children }) => {
  // 这里的user可以从全局状态、context中获取，不需要每次手动传入
  if (user) {
    return <Navigate to="/" replace />;
  }
  return children;
};

// 路由中使用
<Route
  path="/login"
  element={
    <GuestRoute>
      <LoginStandard />
    </GuestRoute>
  }
/>

补充说明 #

如果是组件内部通过逻辑触发的命令式跳转（比如登录接口请求成功后跳首页），不要使用<Navigate />组件，改用v6提供的useNavigate钩子即可：

import { useNavigate } from 'react-router-dom';

const LoginStandard = () => {
  const navigate = useNavigate();
  const handleLogin = async () => {
    // 登录逻辑省略
    navigate('/', { replace: true });
  };

  return (/* 登录页表单内容 */);
};

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