从v5到v6：React Router性能调优踩坑经验

从v5到v6：React Router性能调优踩坑经验

最近项目中将React Router从v5升级到v6，过程中遇到了不少坑，特此记录一下。这次升级不仅是版本号的变更，更是一次重构的契机。

升级前的准备工作

首先，v6移除了<Switch>组件，改为使用<Routes>。这意味着我们不能再使用<Route exact>，而是需要依赖路由匹配的默认行为。

// v5写法
<Route path="/user" exact>
  <User />
</Route>

// v6写法
<Route path="/user" element={<User />} />

踩坑记录

1. 嵌套路由问题 升级后发现嵌套路由无法正常显示，原来是v6中useNavigate和useLocation的使用方式变了。必须确保所有路由组件都正确引用了这些hooks。

// v5中的写法
const { history } = useContext(RouteContext);

// v6中的写法
const navigate = useNavigate();

2. 404页面处理 v6中404页面需要特别处理，使用<Route path="*" element={<NotFound />} />来捕获所有未匹配的路由。

3. 性能优化 通过使用useMemo和useCallback来缓存路由组件，避免不必要的重新渲染。特别是在有大量动态路由的情况下，这一步非常关键。

验证步骤

1. 安装新版本：npm install react-router-dom@6
2. 替换Switch为Routes
3. 更新所有Route的写法
4. 测试所有页面跳转
5. 检查404页面是否正常显示

升级过程虽然有些繁琐，但v6在性能和API设计上都有明显提升，值得投入时间进行迁移。