v6路由参数传递错误导致页面异常排查过程

在React Router v6升级过程中，我们遇到了一个令人困惑的路由参数传递问题。问题表现为：当从页面A通过useNavigate跳转到页面B时，页面B的路由参数总是显示为undefined，导致页面渲染异常。

复现步骤：

1. 页面A中使用useNavigate()进行导航：navigate('/pageB/123')
2. 页面B中使用useParams()获取参数：const { id } = useParams()
3. 参数id始终为undefined

排查过程： 经过分析发现，问题出在路由配置上。v6版本中路由配置方式发生了重大变化，必须确保路由路径正确匹配。原配置：<Route path='/pageB/:id' element={<PageB />} />，但实际使用时忽略了参数的传递。

解决方案：

1. 确保路由配置正确：<Route path='/pageB/:id' element={<PageB />} />
2. 页面跳转时保持路径一致：navigate('/pageB/123')
3. 在页面B中使用正确的参数获取方式：const { id } = useParams()

最佳实践： 建议在升级v6时，先统一梳理所有路由配置，确保参数传递路径完全匹配，并在组件中添加参数校验逻辑以避免运行时错误。