react router v6 彻底改变了属性传递和路由数据访问方式。它废弃了 v5 中的“路由属性”概念以及 `element` 接收函数的方式，转而要求 `element` 直接接收 jsx 元素，并通过 react 钩子（如 `usenavigate`、`uselocation`、`useparams`）在组件内部获取路由相关数据。本文将详细阐述 v6 中正确传递自定义属性和使用路由钩子的方法。
React Router v6 属性传递机制概述
在 React Router v6 中，核心的路由组件
v6 的设计哲学是鼓励使用 React Hooks 来访问路由状态和功能，从而使组件更简洁、更可预测。
正确传递自定义属性 (Custom Props)
如果你需要向路由渲染的组件传递自定义数据或回调函数，可以直接将这些属性作为 JSX 属性传递给
例如，如果你想向 ContactList 组件传递 contacts 数据和 removeContactHandler 回调函数，可以这样操作：
import { Route, Routes } from 'react-router-dom';
// 假设 contacts 和 removeContactHandler 在父组件中定义
const contacts = [
{ id: '1', name: 'Alice' },
{ id: '2', name: 'Bob' }
];
const removeContactHandler = (id) => {
console.log(`Removing contact with id: ${id}`);
// 执行删除逻辑
};
function App() {
return (
);
}在这种模式下，ContactList 组件会直接接收到 contacts 和 getContactId 作为其自身的 props。
访问路由相关数据：React Router v6 钩子 (Hooks)
在 React Router v5 中，Route 组件会向其渲染的组件传递 history、location 和 match 等“路由属性”。但在 v6 中，这些功能已经被一系列专门的 React Hooks 所取代。这些钩子可以在任何函数组件内部调用，以获取路由的当前状态或执行导航操作。
下表总结了 v5 路由属性及其在 v6 中的对应钩子：
| RRDv5 Prop | RRDv6 Hook | 描述 |
|---|---|---|
| history | useNavigate | 用于程序化导航，取代 history.push 等 |
| location | useLocation | 获取当前 URL 的 location 对象 |
| match | useMatch | 检查当前 URL 是否匹配某个路径模式 |
| match.params | useParams | 获取 URL 中的动态参数 |
常用路由钩子示例
以下是如何在组件内部使用这些钩子来访问路由相关数据的示例：
import React from 'react';
import { useLocation, useNavigate, useParams, useMatch } from 'react-router-dom';
const ContactList = ({ contacts, getContactId }) => {
// 获取当前 location 对象，包含 pathname, search, hash, state 等
const location = useLocation();
// 获取导航函数，用于程序化跳转
const navigate = useNavigate();
// 获取 URL 动态参数（例如：/users/:id 中的 id）
const params = useParams();
// 检查当前路径是否匹配某个模式
const match = useMatch('/contacts/:id'); // 例如，匹配 /contacts/123
console.log('Current location:', location);
console.log('URL params:', params);
console.log('Match object:', match);
const handleNavigateToDetail = (id) => {
// 使用 navigate 进行页面跳转
navigate(`/contact/${id}`);
};
return (
联系人列表
{contacts.map((contact) => (
-
{contact.name}
))}
{/* 可以在这里根据 location 或 params 展示不同的内容 */}
{location.search && 查询参数: {location.search}
}
);
};
export default ContactList;钩子说明
- useNavigate(): 返回一个函数，可以用来以编程方式导航。例如，navigate('/dashboard') 会跳转到 /dashboard 路径。
- useLocation(): 返回当前 URL 的 location 对象。这个对象包含了 pathname (路径), search (查询字符串), hash (URL 锚点) 和 state (通过 navigate 传递的状态) 等信息。
- useParams(): 返回一个对象，其中包含 URL 路径中动态部分的键值对。例如，如果路由是 /users/:id 且当前 URL 是 /users/123，useParams() 将返回 { id: '123' }。
- useMatch(pattern): 返回一个 match 对象，如果当前 URL 匹配给定的 pattern，则包含匹配的详细信息；否则返回 null。这对于需要根据特定路径模式执行逻辑的场景非常有用。
注意事项与最佳实践
-
element 属性只接受 JSX: 始终确保
中的 element 属性值是一个 JSX 元素，而不是一个函数。 - 利用钩子获取路由信息: 将所有与路由相关的逻辑（如获取 URL 参数、查询字符串、执行导航）都封装在组件内部，通过 React Router v6 提供的钩子来实现。这有助于保持组件的独立性和可测试性。
- 清晰的职责分离: 外部组件负责定义路由结构和传递固定的自定义属性，而路由渲染的组件则通过钩子动态获取和响应路由变化。
-
避免在 element 中使用 props 展开: 由于 element 不再传递路由属性，{...props} 在
} /> 中的使用已经没有意义，并且在 v6 中是错误的用法。
总结
React Router v6 通过引入 Hooks 彻底改变了路由数据访问和属性传递的方式。理解 element 属性的新行为以及如何有效地利用 useNavigate、useLocation、useParams 和 useMatch 等钩子是掌握 v6 的关键。通过遵循这些最佳实践，开发者可以构建更清晰、更模块化、更易于维护的 React 应用程序。
