从v5到v6：路由组件迁移完整指南

React Router v6的发布带来了许多重要变化，从v5到v6的升级需要仔细规划和执行。本文将详细介绍如何平滑迁移现有路由组件。

核心变化概述

v6最大的改动是移除了Switch组件，改为使用Routes。同时，Route组件的写法也发生了改变，不再支持嵌套组件的直接传递。

迁移步骤

1. 安装新版本

npm install react-router-dom@6

2. 更新路由配置

v5写法：

<Router>
  <Switch>
    <Route path="/home" component={Home} />
    <Route path="/about" component={About} />
  </Switch>
</Router>

v6写法：

<Routes>
  <Route path="/home" element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>

3. 处理嵌套路由

v6中嵌套路由需要使用useRoutes或在父路由中包含子路由元素。

4. 路由跳转更新

// v5
this.props.history.push('/new-path')

// v6
const navigate = useNavigate()
navigate('/new-path')

5. 路由参数获取

// v6
const { params } = useParams()

注意事项

• 确保所有路由组件都使用element属性而不是component
• 使用useNavigate替代history对象
• 检查所有自定义Hook和高阶组件的兼容性

通过以上步骤，可以顺利完成v5到v6的迁移工作。