最近在项目中将React Router从v5升级到v6，踩了不少坑，今天分享几个调试技巧。
1. useParams的使用变化
v6中useParams返回的是对象而非数组，之前代码：
const [id] = useParams(); // v5写法
现在需要改为：
const { id } = useParams(); // v6写法
2. 嵌套路由调试方法
使用<Routes>替代<Switch>，注意路径匹配规则：
<Routes>
<Route path="/user" element={<UserLayout/>}>
<Route path="profile" element={<Profile/>}/>
<Route path="settings" element={<Settings/>}/>
</Route>
</Routes>
调试时可以在组件中添加console.log：
const route = useRouteMatch();
console.log('Current route:', route);
3. 编程式导航问题
v5中的history.push()需要改为useNavigate：
// v5
history.push('/home');
// v6
const navigate = useNavigate();
navigate('/home');
调试小技巧
- 使用React DevTools查看路由组件层级
- 在Route组件上添加key属性便于调试
- 检查路径是否正确匹配，注意通配符使用
升级过程虽然有挑战，但v6的API设计更加简洁。
讨论