从v5到v6：React Router架构重构踩坑总结

React Router v6的升级之路并非一帆风顺，本文将分享从v5到v6的架构重构踩坑总结。

升级前准备

首先需要安装v6版本：

npm install react-router-dom@6

核心变化点

1. Route组件重构

v5中使用<Route>组件，v6中需要在<Routes>内使用：

// v5
<Route path="/" component={Home} />
<Route path="/about" component={About} />

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

2. 嵌套路由变化

v6中嵌套路由需要在父组件中使用<Outlet>：

// 父组件
function Layout() {
  return (
    <div>
      <header>头部</header>
      <main>
        <Outlet />
      </main>
    </div>
  );
}

// 子路由
<Routes>
  <Route path="/" element={<Layout />}>
    <Route index element={<Home />} />
    <Route path="about" element={<About />} />
  </Route>
</Routes>

3. 编程式导航

v5中使用history.push()，v6改为：

import { useNavigate } from 'react-router-dom';

function MyComponent() {
  const navigate = useNavigate();
  
  const handleClick = () => {
    navigate('/target'); // 或 navigate(-1) 返回上一页
  };
}

常见问题及解决方案

1. 动态路由参数获取：使用useParams()替代v5的props.params
2. URL查询参数：使用useSearchParams()处理
3. 重定向逻辑：Navigate组件替换Redirect

实践建议

升级前建议先备份代码，逐步迁移。可使用react-router-dom提供的useLocation和useParams进行测试验证。