从v5到v6：React Router升级踩坑记录
React Router v6作为React生态中的重要路由库，在2021年正式发布，带来了许多重大变化。本文将分享从v5升级到v6的实战经验，帮助开发者避免常见坑点。
主要变化概述
v6版本最显著的变化是路由组件的重构。在v5中，我们使用<Route>组件直接嵌套在<Switch>中，而v6则引入了Routes组件，并且去除了<Switch>的概念，改用更灵活的路由匹配机制。
核心升级步骤
- 安装新版本：
npm install react-router-dom@6
- 替换Route语法：
// v5
<Switch>
<Route path="/home" component={Home} />
<Route path="/about" component={About} />
</Switch>
// v6
<Routes>
<Route path="/home" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
- 更新导航链接：
// v5
<Link to="/home">Home</Link>
// v6
<Link to="/home">Home</Link>
常见问题与解决方案
问题1：嵌套路由配置 在v5中，子路由可以通过嵌套<Route>实现，v6中需要使用element属性配合useRoutes或直接嵌套Routes组件。
问题2：路由参数获取：
// v5
const { match } = useRouteMatch();
// v6
const { params } = useParams();
升级建议
- 先备份代码，使用Git进行版本控制
- 逐步替换路由组件，避免一次性全量修改
- 注意
useNavigate的用法变化，它替代了v5中的history对象 - 测试所有路由跳转功能，确保升级后正常工作
讨论