React Router v6 中组件传参的完整指南

技术教程
2025-11-22 12:34:38

本文旨在详细阐述 react router v6 中如何正确传递参数。我们将深入探讨 `route` 组件的 `element` 属性的正确用法，以及如何利用 react router v6 提供的各种 hooks 来替代 v5 版本中的路由特定 props（如 `history`、`location` 和 `match`），从而实现灵活且高效的组件间数据传递。

理解 React Router v6 的参数传递机制

在 React Router v6 中，参数传递的范式与 v5 版本存在显著差异，尤其是在如何将数据传递给由组件渲染的组件方面。理解这些变化对于避免常见的错误至关重要。

element 属性的正确用法

React Router v6 的组件的 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 h*e an element. This means it will render an 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 来访问路由信息。

度加剪辑

度加剪辑（原度咔剪辑），百度旗下AI创作工具

380 查看详情度加剪辑

以下是 v5 props 及其在 v6 中对应的 Hooks：

RRDv5 Prop	RRDv6 Hook	描述
history	useN*igate	用于程序化导航，替代 history.push 等
location	useLocation	获取当前 URL 的 location 对象
match	useMatch	匹配当前 URL 与特定路径模式
match.params	useParams	获取 URL 路径中的动态参数

示例：在组件中使用路由 Hooks

如果 ContactList 组件需要访问当前路由的 location 信息，或者需要执行导航操作，它应该在其内部使用相应的 Hooks：

import React from 'react';
import { useLocation, useN*igate, useParams } from 'react-router-dom';

const ContactList = ({ contacts, getContactId }) => {
  // 获取当前 location 对象
  const location = useLocation();
  // 获取导航函数
  const n*igate = useN*igate();
  // 获取 URL 路径中的参数（如果路由定义中包含参数，例如 /contacts/:id）
  const params = useParams();

  console.log("当前路径:", location.pathname);
  console.log("URL 参数:", params);

  const handleContactClick = (id) => {
    // 示例：导航到联系人详情页
    n*igate(`/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（useN*igate、useLocation、useParams、useMatch）在组件内部获取。
自定义 Props：对于组件所需的任何非路由相关数据，直接将其作为普通 props 传递给 element 属性中的 JSX 组件。
组件设计：这种新的机制鼓励更纯粹的组件设计，将路由逻辑与组件的UI和数据逻辑分离，使组件更易于测试和复用。

通过遵循这些原则，您将能够有效地在 React Router v6 应用中传递参数和管理路由状态。

以上就是React Router v6 中组件传参的完整指南的详细内容，更多请关注其它相关文章！