v6升级实战：动态路由与静态路由混合使用技巧

最近在项目中将React Router从v5升级到v6，踩了不少坑，今天分享一下动态路由与静态路由混合使用的实战经验。

升级前的准备

首先需要安装新版router：

npm install react-router-dom@latest

核心问题

在v6中，Switch组件被替换为Routes，而且路由配置方式发生了重大变化。我们项目中既有静态路由（如首页、关于我们），也有动态路由（如商品详情页）。

实战方案

// App.js
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* 静态路由 */}
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        
        {/* 动态路由 */}
        <Route path="/product/:id" element={<ProductDetail />} />
        <Route path="/user/:userId/profile" element={<UserProfile />} />
      </Routes>
    </BrowserRouter>
  );
}

关键踩坑点

1. v6中不再支持component属性，必须使用element来传递组件
2. 动态路由参数获取方式：useParams()而不是this.props.match.params
3. 嵌套路由需要在父组件中使用useRoutes或Routes嵌套

最佳实践

推荐将静态路由和动态路由分组管理，避免路由层级过深导致的维护困难。