v6路由重定向踩坑：redirect与Navigate组件使用差异解析

在React Router v6的升级过程中，路由重定向是一个常见的功能需求。然而，在实际使用中，开发者可能会遇到redirect与Navigate组件使用上的差异问题。

问题场景

在v6版本中，官方推荐使用Navigate组件进行页面跳转，但一些老项目或文档中仍存在redirect的用法。两者在使用上存在明显差异。

可复现步骤

创建一个简单的路由配置：

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

function App() {
  return (
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route path="/dashboard" element={<Dashboard />} />
      <Route path="/" element={<Navigate to="/dashboard" replace />} />
    </Routes>
  );
}

在组件中使用redirect（注意：这在v6中已不推荐）：

// 错误用法
import { redirect } from 'react-router-dom';

function MyComponent() {
  // redirect返回值不能直接作为组件使用
  return <div>My Component</div>;
}

核心差异

Navigate是组件，可以在JSX中直接使用
redirect是函数，用于处理数据加载逻辑，不适用于组件渲染

解决方案

建议统一使用Navigate组件进行重定向操作，并配合useNavigate Hook进行程序化跳转：

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

function MyComponent() {
  const navigate = useNavigate();
  
  const handleLogin = () => {
    // 登录成功后跳转
    navigate('/dashboard', { replace: true });
  };
  
  return <button onClick={handleLogin}>登录</button>;
}