如何使用 React Router 在页面之间传递数据？

在 React Router 页面之间传递数据

概述

React Router 是一个强大的库，用于在 React 应用程序中实现导航。它允许您无缝定义路线并处理页面转换。一种常见的用例是在页面之间传递数据以进行显示或进一步处理。

解决方案：

选项 1：路由状态

使用 React Router v6，您可以使用状态链接或导航组件的属性以在导航时传递数据。此数据可通过目标页面上的位置对象访问。

选项 2：URL 路径

另一个选项是使用 : 表示法将数据合并到 URL 路径中。可以从目标页面上的 match 属性中检索数据。

选项 3：URL 查询字符串

与使用 URL 路径类似，您可以使用以下方法将数据附加到 URL 查询字符串： ？象征。可以通过 useSearchParams 挂钩或目标页面上位置对象的搜索属性来访问此数据。

示例：

考虑一个场景，您想要从用户列表导航到用户详情页。

// User List Page
import React, { Component } from "react";

export default class User extends Component {
  render() {
    return (
      {this.props.users.map(user => (
        <Link key={user.id} to={`/user/${user.id}`}>
          {user.name}
        </Link>
      ))}
    );
  }
}

// User Details Page
import React from "react";
import { useParams } from "react-router-dom";

export default function UserDetails() {
  const { id } = useParams();
  return (
    {id}
  );
}

在这个例子中，当用户点击用户名时，他们导航到 UserDetails 页面，该页面通过 URL 路径接收用户的 ID。

以上是如何使用 React Router 在页面之间传递数据？的详细内容。更多信息请关注PHP中文网其他相关文章！