React Router v6 属性传递与路由钩子使用指南

react router v6 彻底改变了属性传递和路由数据访问方式。它废弃了 v5 中的“路由属性”概念以及 `element` 接收函数的方式，转而要求 `element` 直接接收 jsx 元素，并通过 react 钩子（如 `usenavigate`、`uselocation`、`useparams`）在组件内部获取路由相关数据。本文将详细阐述 v6 中正确传递自定义属性和使用路由钩子的方法。

React Router v6 属性传递机制概述

在 React Router v6 中，核心的路由组件 <Route> 的 element 属性不再接受一个返回 JSX 的函数，而是直接期望一个 React.ReactNode，即一个 JSX 元素。这意味着 v5 中通过 element={(props) => <Component {...props} />} 的方式来获取路由属性（如 history, location, match）已经不再适用，并且会导致页面空白并出现类似“Matched leaf route at location "/" does not have an element.”的警告。

v6 的设计哲学是鼓励使用 React Hooks 来访问路由状态和功能，从而使组件更简洁、更可预测。

正确传递自定义属性 (Custom Props)

如果你需要向路由渲染的组件传递自定义数据或回调函数，可以直接将这些属性作为 JSX 属性传递给 <Route> 的 element 属性中包含的组件。

例如，如果你想向 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 (
    <Routes>
      <Route
        path="/"
        element={(
          <ContactList
            contacts={contacts}
            getContactId={removeContactHandler}
          />
        )}
      />
      {/* 其他路由 */}
    </Routes>
  );
}

在这种模式下，ContactList 组件会直接接收到 contacts 和 getContactId 作为其自身的 props。

Flawless AI

好莱坞2.0，电影制作领域的生成式AI工具

32

查看详情

访问路由相关数据：React Router v6 钩子 (Hooks)

在 React Router v5 中，Route 组件会向其渲染的组件传递 history、location 和 match 等“路由属性”。但在 v6 中，这些功能已经被一系列专门的 React Hooks 所取代。这些钩子可以在任何函数组件内部调用，以获取路由的当前状态或执行导航操作。

下表总结了 v5 路由属性及其在 v6 中的对应钩子：

常用路由钩子示例

以下是如何在组件内部使用这些钩子来访问路由相关数据的示例：

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 (
    <div>
      <h2>联系人列表</h2>
      <ul>
        {contacts.map((contact) => (
          <li key={contact.id}>
            {contact.name}
            <button onClick={() => getContactId(contact.id)}>删除</button>
            <button onClick={() => handleNavigateToDetail(contact.id)}>查看详情</button>
          </li>
        ))}
      </ul>
      {/* 可以在这里根据 location 或 params 展示不同的内容 */}
      {location.search && <p>查询参数: {location.search}</p>}
    </div>
  );
};

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。这对于需要根据特定路径模式执行逻辑的场景非常有用。

注意事项与最佳实践

1. element 属性只接受 JSX: 始终确保 <Route element={...} /> 中的 element 属性值是一个 JSX 元素，而不是一个函数。
2. 利用钩子获取路由信息: 将所有与路由相关的逻辑（如获取 URL 参数、查询字符串、执行导航）都封装在组件内部，通过 React Router v6 提供的钩子来实现。这有助于保持组件的独立性和可测试性。
3. 清晰的职责分离: 外部组件负责定义路由结构和传递固定的自定义属性，而路由渲染的组件则通过钩子动态获取和响应路由变化。
4. 避免在 element 中使用 props 展开: 由于 element 不再传递路由属性，{...props} 在 <Route element={(props) => <Component {...props} />} /> 中的使用已经没有意义，并且在 v6 中是错误的用法。

总结

React Router v6 通过引入 Hooks 彻底改变了路由数据访问和属性传递的方式。理解 element 属性的新行为以及如何有效地利用 useNavigate、useLocation、useParams 和 useMatch 等钩子是掌握 v6 的关键。通过遵循这些最佳实践，开发者可以构建更清晰、更模块化、更易于维护的 React 应用程序。

以上就是React Router v6 属性传递与路由钩子使用指南的详细内容，更多请关注php中文网其它相关文章！