v6版本路由配置参数说明

React Router v6 路由配置参数详解

React Router v6 相较于 v5 在路由配置上做了重大调整，理解其参数配置对迁移和使用至关重要。

核心配置参数

1. Routes 组件

import { Routes, Route } from 'react-router-dom';

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

2. element 属性 v6 中移除了 component 属性，改用 element 来渲染组件。

<Route path="/user/:id" element={<UserComponent />} />

3. 路由匹配规则 使用 path 属性定义路径模式，支持参数匹配：

<Route path="/user/:userId/profile/:profileId" element={<UserProfile />} />

4. 嵌套路由配置 通过在父组件中渲染子路由实现嵌套：

// 父路由组件
function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Routes>
        <Route path="users" element={<Users />} />
        <Route path="settings" element={<Settings />} />
      </Routes>
    </div>
  );
}

实际迁移步骤

1. 替换所有 Switch 为 Routes
2. 将 component 替换为 element
3. 使用 useParams 和 useNavigate 等 hooks 替代 props

关键提醒： v6 中路由配置必须在 Routes 组件内，且路径匹配遵循严格规则。