DEV Community ·

React Router v5 与 v6：关键差异解析

💡 原文英文，约400词，阅读约需2分钟。

📝

内容提要

React Router v6 相较于 v5 的改进包括：1. 用 Routes 代替 Switch，element 代替 component。2. 默认精确匹配，无需 exact。3. 嵌套路由更直观。4. 用 useNavigate 代替 useHistory。5. 仅用 element 渲染 JSX。6. 支持相对路径。7. 用 Navigate 代替 Redirect。8. 改进 Hooks API。这些变化简化了 API，使路由处理更简单。

🎯

关键要点

React Router v6 用 Routes 代替 Switch，element 代替 component。
默认精确匹配，无需 exact 属性。
嵌套路由结构更直观。
用 useNavigate 代替 useHistory 进行编程导航。
仅用 element 渲染 JSX，移除 component 和 render。
支持相对路径，无需构建绝对路径。
用 Navigate 代替 Redirect 处理路由重定向。
Hooks API 得到改进，提供更大的灵活性。

❓

延伸问答

React Router v6 相较于 v5 有哪些主要改进？

React Router v6 主要改进包括用 Routes 代替 Switch，element 代替 component，默认精确匹配，无需 exact，嵌套路由更直观，使用 useNavigate 代替 useHistory，支持相对路径，以及用 Navigate 代替 Redirect。

如何在 React Router v6 中定义嵌套路由？

在 React Router v6 中，嵌套路由可以直接在 Routes 结构中声明，例如：<Routes><Route path="/dashboard" element={<Dashboard />}><Route path="settings" element={<Settings />} /></Route></Routes>。

React Router v6 中如何进行编程导航？

在 React Router v6 中，使用 useNavigate() 进行编程导航，例如：const navigate = useNavigate(); navigate('/about');。

React Router v6 中的相对路径是如何工作的？

React Router v6 支持相对路径，允许根据当前路由构建路径，例如：<Link to="settings">Settings</Link>。

React Router v6 中如何处理路由重定向？

在 React Router v6 中，使用 Navigate 组件来处理路由重定向，例如：<Navigate to="/login" />。

React Router v6 中的 Hooks API 有哪些改进？

React Router v6 中的 Hooks API 得到简化，提供了如 useParams、useNavigate 和 useRoutes 等更灵活的钩子。

🏷️