React Router：参数传递与接收实战解析

2024-06-13 20:39:25 浏览数 (1)

引言

大家好，我是腾讯云开发者社区的 Front_Yue，在React应用中，路由（Router）是一个非常重要的概念。它允许我们在不同的组件之间进行导航，实现组件间的切换。而在实际开发过程中，我们往往需要在不同的组件之间传递数据，这时候就需要使用到React Router的传参功能。本文将详细介绍React Router的传参方式以及如何接收参数，并以函数式组件为例进行讲解。

正文内容

一、传参方式

1. URL参数

URL参数是最常见的传参方式，通过在路由路径中定义参数，然后在组件中通过useParams() Hook获取。例如：

代码语言：javascript复制
import { Route, Link } from 'react-router-dom';
import { useParams } from 'react-router-dom';

// 路由配置
<Route path="/user/:id" component={User} />

// User组件中获取参数
function User() {
  const { id } = useParams();
  return <div>用户ID：{id}</div>;
}
2. 查询参数（Query Parameters）

查询参数是另一种常见的传参方式，通过URL中的问号（?）后面的键值对传递数据。在组件中，我们可以使用useLocation() Hook结合URLSearchParams来获取查询参数。例如：

代码语言：javascript复制
import { Link, useLocation } from 'react-router-dom';

// 导航到一个带查询参数的路由
<Link to="/search?keyword=react">搜索</Link>

// 在组件中获取查询参数
function Search() {
  const location = useLocation();
  const query = new URLSearchParams(location.search);
  const keyword = query.get("keyword");
  return <div>搜索关键词：{keyword}</div>;
}
3. 状态参数（State Parameters）

状态参数是一种在导航时传递数据的方式，它不会出现在URL中。通过<Link>组件的state属性传递数据，然后在目标组件中通过useLocation() Hook获取。例如：

代码语言：javascript复制
import { Link, useLocation } from 'react-router-dom';

// 导航到一个带状态参数的路由
<Link to={{ pathname: "/detail", state: { id: 1, name: "React" } }}>详情</Link>

// 在组件中获取状态参数
function Detail() {
  const location = useLocation();
  const { id, name } = location.state;
  return (
    <div>
      <p>ID：{id}</p>
      <p>名称：{name}</p>
    </div>
  );
}

二、接收参数

1. 使用useParams() Hook接收URL参数
代码语言：javascript复制
import { useParams } from 'react-router-dom';

function User() {
  const { id } = useParams();
  return <div>用户ID：{id}</div>;
}
2. 使用useLocation() Hook结合URLSearchParams接收查询参数
代码语言：javascript复制
import { useLocation } from 'react-router-dom';

function Search() {
  const location = useLocation();
  const query = new URLSearchParams(location.search);
  const keyword = query.get("keyword");
  return <div>搜索关键词：{keyword}</div>;
}
3. 使用useLocation() Hook接收状态参数
代码语言：javascript复制
import { useLocation } from 'react-router-dom';

function Detail() {
  const location = useLocation();
  const { id, name } = location.state;
  return (
    <div>
      <p>ID：{id}</p>
      <p>名称：{name}</p>
    </div>
  );
}

总结

通过以上介绍，相信大家对React Router的传参方式以及接收参数有了更深入的了解。在实际开发中，可以根据实际需求选择合适的传参方式，以实现组件间的数据传递。希望本文能对大家有所帮助。

最后，感谢腾讯云开发者社区小伙伴的陪伴，如果你喜欢我的博客内容，认可我的观点和经验分享，请点赞、收藏和评论，这将是对我最大的鼓励和支持。同时，也欢迎大家提出宝贵的意见和建议，让我能够更好地改进和完善我的博客。谢谢！

我正在参与2024腾讯技术创作特训营最新征文，快来和我瓜分大奖！

react.js 腾讯技术创作特训营S7

0 人点赞