从v5到v6：React Router重定向逻辑踩坑分析
React Router v6的发布带来了许多重要变化，其中最显著的就是重定向机制的重构。本文将深入分析v5到v6迁移过程中遇到的重定向逻辑问题。
v5中的重定向方式
在v5中，我们通常使用<Redirect>组件来实现页面跳转：
import { Route, Redirect } from 'react-router-dom';
function App() {
return (
<Switch>
<Route exact path="/">
{user ? <Redirect to="/dashboard" /> : <Login />}
</Route>
</Switch>
);
}
v6中的变化与问题
v6中移除了<Redirect>组件，引入了新的useNavigate Hook和useLocation Hook来处理重定向。这带来了几个常见问题：
-
嵌套路由中的重定向：在v5中，
<Redirect>会立即执行跳转，而在v6中需要使用navigate()函数并配合条件判断。 -
使用错误示例：
// ❌ 错误写法
function ProtectedRoute() {
const navigate = useNavigate();
if (!isAuthenticated) {
return <Redirect to="/login" />; // 这里会报错，因为没有Redirect组件
}
return <Outlet />;
}
- 正确实现方式：
// ✅ 正确写法
function ProtectedRoute() {
const navigate = useNavigate();
const location = useLocation();
useEffect(() => {
if (!isAuthenticated) {
navigate('/login', { replace: true });
}
}, [isAuthenticated, navigate]);
return isAuthenticated ? <Outlet /> : null;
}
实际迁移步骤
- 找出所有使用
<Redirect>的组件 - 替换为
useNavigate()调用 - 处理嵌套路由中的跳转逻辑
- 测试所有重定向路径是否正常工作
避坑建议
- 使用
navigate()时注意设置replace: true来避免历史记录堆积 - 对于条件渲染的重定向，记得在useEffect中处理
- 在复杂路由结构中，优先使用
useNavigate而非组件方式
通过以上调整，可以顺利完成v5到v6的重定向逻辑迁移。
讨论