react-router-dom v5 与 v6 的区别详解

📌 1. 路由配置方式：从组件嵌套到配置式声明

v5 示例：

<Route path="/about" component={About} />
<Route path="/home" render={() => <Home />} />

v6 示例：

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

✅ 区别：

• v6 中 component 和 render 被统一替换为 element={<组件 />}
• element 是一个 JSX 元素，而不是函数或组件引用

📌 2. Switch 改为 Routes

v5：

<Switch>
  <Route path="/a" component={A} />
</Switch>

v6：

<Routes>
  <Route path="/a" element={<A />} />
</Routes>

✅ 区别：

• Switch 在 v6 中被彻底废弃，改用 Routes
• Routes 会自动根据优先级匹配单一路由

📌 3. 嵌套路由的新语法

v5：

需要使用 Route 嵌套或动态渲染子路由

v6：

支持配置式嵌套，使用 children 属性

<Routes>
  <Route path="/dashboard" element={<Dashboard />}>
    <Route path="stats" element={<Stats />} />
    <Route path="profile" element={<Profile />} />
  </Route>
</Routes>

📌 4. useNavigate 代替 useHistory

v5：

const history = useHistory();
history.push("/login");

v6：

const navigate = useNavigate();
navigate("/login");

📌 5. 精准匹配（exact）被移除

v5：

<Route exact path="/" component={Home} />

v6：

不再需要 exact，匹配行为已默认精确

📌 6. 不再支持自定义渲染方式（如 render props）

v6 不再支持如下写法：

<Route path="/about" render={() => <About />} />

必须使用：

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

📌 7. 动态参数 useParams 使用方式一致

v6 与 v5 相同：

const { id } = useParams();

但 v6 中支持 loader + action 进行数据预处理。

📌 8. 重定向变化：Redirect -> Navigate

v5：

<Redirect to="/login" />

v6：

<Navigate to="/login" />

📌 9. 更强的类型支持（TS）

v6 对 TypeScript 类型支持更清晰，函数式 Hook API 使用体验更好。

📌 10. 数据加载机制（v6.4+）

v6.4+ 引入类似 Remix 的 loader/action 数据机制，是一个革命性增强，v5 无此能力。

✅ 总结对比表