react-router-dom v6 使用<Navigate/>实现条件不满足时强制重定向的代码问题

• 不符合react-router-dom v6的语法规范：Routes组件的直接子元素只能是Route组件，你在未登录分支的Routes下直接放置Navigate组件，不会被路由系统识别，用户访问非/login路径时不会触发重定向，只会渲染空白内容。
• 路由匹配逻辑缺失：已登录状态下的路由列表没有配置/login路径的匹配规则，已登录用户手动访问/login时会触发404，无法自动跳转到应用内页面。
• 实现方式冗余：拆分两个独立的Routes组件会导致登录状态切换时整个路由树重新挂载，造成内部组件状态丢失，也不利于后续路由规则的统一维护。

推荐封装统一的路由守卫组件实现权限控制，写法如下：

1. 封装权限校验组件

import { Navigate, useLocation } from 'react-router-dom'

// 私有路由守卫：未登录时强制跳转到登录页
const RequireAuth = ({ children }) => {
  const isLogin = // 替换为你的实际登录状态判断逻辑
  const currentLocation = useLocation()
  if (!isLogin) {
    // state携带跳转前的路径，登录完成后可以直接跳回目标页
    return <Navigate to="/login" state={{ from: currentLocation }} replace />
  }
  return children
}

2. 统一配置路由规则

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

// 路由入口处统一配置
<Routes>
  {/* 公开路由：登录页，已登录用户访问自动跳转到首页 */}
  <Route path="/login" element={
    isLogin ? <Navigate to="/" replace /> : <Login />
  } />
  {/* 私有路由：需要登录才能访问 */}
  <Route path="/profile" element={
    <RequireAuth>
      <Profile />
    </RequireAuth>
  } />
  <Route path="/chat" element={
    <RequireAuth>
      <Chat />
    </RequireAuth>
  } />
  <Route path="/" element={
    <RequireAuth>
      <UserList />
    </RequireAuth>
  } />
</Routes>

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