React Router v6 路由数据管理踩坑记录
最近在将项目从 React Router v5 升级到 v6 版本时，发现路由数据管理这块有不少坑需要踩。本文记录一下升级过程中遇到的主要问题和解决方案。
问题一：useParams 的使用方式改变
v5 中可以直接通过 this.props.match.params 获取参数，但在 v6 中必须使用 hooks 方式：
// v5
const { id } = this.props.match.params;
// v6
const { id } = useParams();
问题二：路由数据传递方式调整
v6 不再支持 routeProps 的自动注入，需要手动传递数据：
// v5
<Route path="/user/:id" component={UserComponent} />
// v6
<Route path="/user/:id" element={<UserComponent />} />
// 在组件中获取参数
function UserComponent() {
const { id } = useParams();
// 使用 id 进行数据获取
}
问题三：嵌套路由数据处理
v6 中嵌套路由的数据传递更加严格，需要确保每个层级的路由都能正确访问到数据。建议使用 useLocation 和 useNavigate 来管理路由状态。
解决方案
- 统一重构所有路由组件，替换所有旧的参数获取方式
- 建立路由数据管理工具函数，封装常用的路由数据获取逻辑
- 使用 React Context 管理跨层级的路由数据共享
升级过程中虽然有些麻烦，但 v6 的设计更加清晰，长远来看是值得的。
讨论