React Router：参数传递与接收实战解析
原创
引言
大家好，我是腾讯云开发者社区的 Front_Yue，在React应用中，路由（Router）是一个非常重要的概念。它允许我们在不同的组件之间进行导航，实现组件间的切换。而在实际开发过程中，我们往往需要在不同的组件之间传递数据，这时候就需要使用到React Router的传参功能。本文将详细介绍React Router的传参方式以及如何接收参数，并以函数式组件为例进行讲解。
正文内容
一、传参方式
1. URL参数
URL参数是最常见的传参方式，通过在路由路径中定义参数，然后在组件中通过useParams() Hook获取。例如：
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来获取查询参数。例如：
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获取。例如：
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参数
import { useParams } from 'react-router-dom';
function User() {
const { id } = useParams();
return <div>用户ID：{id}</div>;
}2. 使用useLocation() Hook结合URLSearchParams接收查询参数
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接收状态参数
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的传参方式以及接收参数有了更深入的了解。在实际开发中，可以根据实际需求选择合适的传参方式，以实现组件间的数据传递。希望本文能对大家有所帮助。
最后，感谢腾讯云开发者社区小伙伴的陪伴，如果你喜欢我的博客内容，认可我的观点和经验分享，请点赞、收藏和评论，这将是对我最大的鼓励和支持。同时，也欢迎大家提出宝贵的意见和建议，让我能够更好地改进和完善我的博客。谢谢！
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。