v6版本升级后路由组件渲染性能记录
最近项目从React Router v5升级到v6，本以为只是简单的API变更，结果却踩了不少坑。特别是路由组件的渲染性能问题，让我重新审视了路由设计。
问题复现
升级后发现页面跳转时组件重复渲染。通过控制台观察发现，当使用<Route>嵌套时，父组件和子组件会同时触发render。以下是复现代码：
// v5写法
<Route path="/user/:id" component={UserComponent} />
// v6写法
<Route path="/user/:id" element={<UserComponent />} />
根本原因
主要问题出在useParams hook的使用上。v6中useParams需要在正确的路由上下文中才能获取到参数，如果组件被多个路由共享，会触发不必要的重渲染。
解决方案
- 使用
useMemo缓存路由参数：
const params = useParams();
const memoizedParams = useMemo(() => params, [params]);
- 重构路由结构，避免不必要的嵌套：
<Route path="/user" element={<UserLayout />}>
<Route index element={<UserList />} />
<Route path=":id" element={<UserDetail />} />
</Route>
- 使用
useLocation优化路由监听：
const location = useLocation();
useEffect(() => {
// 只在必要时执行
}, [location.pathname]);
目前性能问题已解决，但升级过程确实让我深刻体会到API变更带来的连锁反应。
讨论