v6升级后数据迁移

v6升级后数据迁移踩坑记录

最近项目从React Router v5升级到v6，本以为只是简单的版本更新，没想到数据迁移这块踩了大坑。

问题背景

升级前的路由配置使用了<Switch>和<Route>组件，升级后需要改为<Routes>。但更麻烦的是，之前通过history.push()进行的页面跳转，在v6中完全失效了。

具体踩坑过程

在项目中使用了大量history.push('/detail/' + id)进行数据跳转，升级后发现：

1. useHistory Hook被移除，需要改用useNavigate
2. 跳转方式从history.push()改为navigate('/detail/' + id)
3. 传参方式也需要调整

复现步骤

// v5写法 - 已失效
const history = useHistory();
history.push('/user/' + userId);

// v6正确写法
const navigate = useNavigate();
navigate('/user/' + userId);

// 带参数跳转
navigate(`/user/${userId}?tab=profile`);

数据迁移策略

建议采用分步迁移：

1. 先统一替换所有useHistory为useNavigate
2. 逐步检查并修复所有跳转逻辑
3. 注意处理带参数的路由匹配问题
4. 测试所有用户操作路径，确保数据流向正确

总结

v6版本虽然功能更强大，但迁移成本确实不小。特别是对于大型项目，建议先做充分测试，避免出现数据错乱或跳转异常等问题。