react-router-dom v6.0.0版本中Redirect组件的替代方案是什么？

React Router v6 版本正式移除了原有的 Redirect 组件，根据使用场景的不同，有两类官方推荐的替代方案：

1. 路由配置/渲染场景下使用 <Navigate> 组件 #

如果是在路由匹配规则、组件渲染逻辑中直接实现重定向，使用 Navigate 组件即可完全替代原 Redirect 的功能：

• 原 Redirect 默认会替换浏览器历史栈的当前记录，要实现完全一致的行为，需要给 Navigate 加上 replace 属性
• 没有加 replace 属性时，重定向会新增一条历史记录，用户点击浏览器后退按钮会回到重定向前的页面

示例代码：

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

function App() {
  return (
    <Routes>
      {/* 旧路径重定向到新路径 */}
      <Route path="/old-user" element={<Navigate to="/user-center" replace />} />
      <Route path="/user-center" element={<UserCenter />} />
      {/* 未匹配到路由时重定向到首页 */}
      <Route path="*" element={<Navigate to="/" replace />} />
    </Routes>
  )
}

2. 事件回调/逻辑判断场景下使用 useNavigate 钩子 #

如果是在接口请求回调、按钮点击事件、权限判断等非直接渲染的场景中触发重定向，需要使用 useNavigate 钩子：

• 调用 navigate 方法时第二个参数传入 {replace: true} 即可实现和原 Redirect 一致的历史栈替换行为
• 不需要替换历史栈时可以省略第二个参数，直接传入目标路径即可

示例代码：

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

function LoginForm() {
  const navigate = useNavigate();

  const submitLogin = async () => {
    const res = await fetchLoginApi();
    if (res.code === 0) {
      // 登录成功后跳转到个人中心
      navigate('/user-center', { replace: true });
    }
  }

  return <button onClick={submitLogin}>提交登录</button>
}

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