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

本文旨在详细阐述 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 来访问路由信息。

Elser AI Comics

一个免费且强大的AI漫画生成工具，助力你三步创作自己的一出好戏

522

查看详情

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

示例：在组件中使用路由 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 应用中传递参数和管理路由状态。

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