本文旨在详细阐述 react router v6 中如何正确传递参数。我们将深入探讨 `route` 组件的 `element` 属性的正确用法，以及如何利用 react router v6 提供的各种 hooks 来替代 v5 版本中的路由特定 props（如 `history`、`location` 和 `match`），从而实现灵活且高效的组件间数据传递。
理解 React Router v6 的参数传递机制
在 React Router v6 中，参数传递的范式与 v5 版本存在显著差异，尤其是在如何将数据传递给由 <Route> 组件渲染的组件方面。理解这些变化对于避免常见的错误至关重要。
element 属性的正确用法
React Router v6 的 <Route> 组件的 element 属性期望接收一个 React.ReactNode，通常是 JSX 元素，而不是一个返回 JSX 的函数。许多开发者在从 v5 迁移时，可能会尝试像 v5 那样传递一个函数来接收路由 props，例如：
<Route
exact
path="/"
element={(props) => (
<ContactList
{...props} // 在v6中这是不正确的用法
contacts={contacts}
getContactId={removeContactHandler}
/>
)}
/>这种写法在 React Router v6 中会导致页面空白，并伴随警告信息：“Matched leaf route at location "/" does not have an element. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.”。这个警告明确指出 element 属性没有收到有效的 React 元素。
正确的做法是直接将组件作为 JSX 传递给 element 属性，并像普通 React 组件一样传递自定义 props：
import { Route } from 'react-router-dom';
// 假设 contacts 和 removeContactHandler 在父组件中定义
const contacts = [/* ... */];
const removeContactHandler = (id) => { /* ... */ };
function App() {
return (
<Routes>
<Route
path="/"
element={(
<ContactList
contacts={contacts}
getContactId={removeContactHandler}
/>
)}
/>
{/* 其他路由 */}
</Routes>
);
}通过这种方式，contacts 和 getContactId 等自定义数据会作为 props 正常传递给 ContactList 组件。
替代 v5 的路由特定 Props：使用 Hooks
在 React Router v5 中，路由组件会自动接收 history、location 和 match 等路由相关 props。然而，在 v6 中，这些路由特定的 props 已被移除，取而代之的是一系列强大的 React Hooks。这意味着你需要在组件内部使用这些 Hooks 来访问路由信息。
以下是 v5 props 及其在 v6 中对应的 Hooks：
| RRDv5 Prop | RRDv6 Hook | 描述 |
|---|---|---|
| history | useNavigate | 用于程序化导航，替代 history.push 等 |
| location | useLocation | 获取当前 URL 的 location 对象 |
| match | useMatch | 匹配当前 URL 与特定路径模式 |
| match.params | useParams | 获取 URL 路径中的动态参数 |
示例：在组件中使用路由 Hooks
如果 ContactList 组件需要访问当前路由的 location 信息，或者需要执行导航操作，它应该在其内部使用相应的 Hooks：
import React from 'react';
import { useLocation, useNavigate, useParams } from 'react-router-dom';
const ContactList = ({ contacts, getContactId }) => {
// 获取当前 location 对象
const location = useLocation();
// 获取导航函数
const navigate = useNavigate();
// 获取 URL 路径中的参数（如果路由定义中包含参数，例如 /contacts/:id）
const params = useParams();
console.log("当前路径:", location.pathname);
console.log("URL 参数:", params);
const handleContactClick = (id) => {
// 示例：导航到联系人详情页
navigate(`/contacts/${id}`);
};
return (
<div>
<h2>联系人列表</h2>
<ul>
{contacts.map((contact) => (
<li key={contact.id} onClick={() => handleContactClick(contact.id)}>
{contact.name}
<button onClick={() => getContactId(contact.id)}>删除</button>
</li>
))}
</ul>
</div>
);
};
export default ContactList;总结与注意事项
- element 属性的类型：始终记住 Route 的 element 属性接收的是 JSX 元素，而不是一个函数。
- 路由数据访问：不再通过 props 传递路由数据（如 history、location），而是通过 React Router v6 提供的 Hooks（useNavigate、useLocation、useParams、useMatch）在组件内部获取。
- 自定义 Props：对于组件所需的任何非路由相关数据，直接将其作为普通 props 传递给 element 属性中的 JSX 组件。
- 组件设计：这种新的机制鼓励更纯粹的组件设计，将路由逻辑与组件的UI和数据逻辑分离，使组件更易于测试和复用。
通过遵循这些原则，您将能够有效地在 React Router v6 应用中传递参数和管理路由状态。
