React Router Dom v6中Redirect弃用后的替代方案及条件跳转实现问题

v6版本中移除了Redirect组件，同时Route组件不再支持render属性，所有渲染内容统一通过element属性传入，你原有逻辑的等价实现如下：

<Route 
  path='/signin' 
  element={
    this.props.currentUser ? <Navigate to='/' replace /> : <SignIn />
  }
/>

注意事项 #

• 代码中to='/'为默认跳转首页的配置，可替换为你原有业务需要跳转的实际路径
• 添加replace属性是为了和v5版本Redirect的行为完全对齐，替换当前历史栈条目，避免用户点击后退按钮重新回到登录页
• v6版本所有Route组件必须包裹在Routes组件（替代v5的Switch组件）中才能正常运行

如果需要复用路由拦截逻辑，可以封装公共的路由守卫组件，示例如下：

// 封装仅未登录用户可访问的公共路由组件
const PublicRoute = ({ children }) => {
  // 此处替换为你项目中获取当前登录用户的逻辑
  const currentUser = this.props.currentUser
  return currentUser ? <Navigate to='/' replace /> : children
}

// 路由中使用
<Route 
  path='/signin' 
  element={
    <PublicRoute>
      <SignIn />
    </PublicRoute>
  }
/>

如果是函数组件场景，也可以直接结合Hooks使用：

import { useSelector } from 'react-redux'
import { Navigate, Route, Routes } from 'react-router-dom'
import SignIn from './SignIn'

function App() {
  // 示例为从Redux中取登录态，可替换为你项目的实际取数逻辑
  const currentUser = useSelector(state => state.user.currentUser)
  return (
    <Routes>
      <Route 
        path='/signin' 
        element={currentUser ? <Navigate to='/' replace /> : <SignIn />} 
      />
      {/* 其他路由配置 */}
    </Routes>
  )
}

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