React 路由组件传参指南：3 种方法让数据 “跑” 起来 🚀
作为前端开发者，我们经常需要在不同的路由组件之间传递数据。就像现实生活中传递信件一样，React 路由也有多种 “邮寄” 数据的方式。今天咱们就来聊聊 React 路由组件传递参数的 3 种方法，保证让你看完就能上手！
1. params 参数：最直接的 “地址栏” 传递 🏷️
params 参数就像是把包裹信息直接写在快递单的显眼位置，明明白白，一眼就能看到。
用法示例
路由链接（携带参数）：
<Link to='/user/detail/tom/18'>查看Tom的详情</Link>
这里我们把用户名和年龄直接放在了 URL 路径中，就像/user/detail/姓名/年龄这样的格式。
注册路由（声明接收）：
<Route path="/user/detail/:name/:age" component={UserDetail}/>
注意这里的:name和:age，它们就像是两个 “占位符”，告诉 React：“嘿，这两个位置会有参数传过来哦！”
接收参数：
在 UserDetail 组件中，我们可以这样获取参数：
componentDidMount() {
const { name, age } = this.props.match.params;
console.log(`接收到的用户信息：姓名=${name}，年龄=${age}`);
}
运行效果
当点击链接后，地址栏会显示http://localhost:3000/user/detail/tom/18，在 UserDetail 组件中能成功获取到{name: ‘tom’, age: ‘18’}的参数对象。
适用场景
这种方式适合传递简单的、非敏感的数据，因为参数会直接显示在地址栏中。比如用户 ID、文章 ID 等。
2. search 参数：带 “问号” 的查询式传递 🔍
search 参数就像是在快递单上附了一张查询纸条，用问号开头，参数之间用 & 连接，非常灵活。
用法示例
路由链接（携带参数）：
<Link to='/product/list?category=phone&price=1999'>手机列表</Link>
这里我们传递了商品分类和价格两个参数，格式就像?参数名1=值1&参数名2=值2。
注册路由（无需声明）：
<Route path="/product/list" component={ProductList}/>
使用 search 参数时，注册路由不需要特别声明参数，正常注册即可，是不是很方便？
接收参数：
import querystring from 'querystring';
componentDidMount() {
// 先获取到search字符串，格式是"?category=phone&price=1999"
const search = this.props.location.search;
// 去掉开头的问号
const searchStr = search.slice(1);
// 解析为对象
const params = querystring.parse(searchStr);
console.log('商品参数：', params); // {category: 'phone', price: '1999'}
}
运行效果
点击链接后，地址栏会显示http://localhost:3000/product/list?category=phone&price=1999。通过 querystring 解析后，我们得到了一个整洁的参数对象。
小提示
React 脚手架中已经内置了 querystring 模块，不需要额外安装。如果是在其他环境，可能需要npm install querystring哦。
3. state 参数：隐藏的 “携带者” 🤐
state 参数就像是把秘密信息交给了一个可靠的信使，它不会出现在地址栏中，但能安全地把信息带到目的地。
用法示例
路由链接（携带参数）：
<Link to={{
pathname: '/message/detail',
state: {
title: '春节放假通知',
date: '2024-01-20',
content: '今年春节放假7天'
}
}}>
查看放假通知
</Link>
这里我们通过一个对象的形式传递参数，pathname 指定路由路径，state 中存放我们要传递的数据。
注册路由（无需声明）：
<Route path="/message/detail" component={MessageDetail}/>
使用 state 参数时，注册路由也不需要特别声明，正常写路径就好。
接收参数：
componentDidMount() {
const { title, date, content } = this.props.location.state;
console.log(`收到消息：${title}，发布时间：${date}`);
console.log(`消息内容：${content}`);
}
运行效果
点击链接后，地址栏显示http://localhost:3000/message/detail，看不到任何参数信息，但在 MessageDetail 组件中却能成功获取到 state 中的所有数据。更棒的是，即使刷新页面，这些参数也不会丢失！
适用场景
这种方式适合传递敏感数据或者较多的信息，因为参数不会暴露在地址栏中，而且刷新页面也能保留数据。
总结一下 📝
三种传递参数的方法各有千秋：
- params 参数：简单直接，参数可见，适合传递少量简单数据
- search 参数：灵活多样，参数可见，适合传递查询条件
- state 参数：隐蔽安全，参数不可见，适合传递敏感或大量数据
就像邮寄包裹一样，根据包裹的内容和紧急程度，我们会选择不同的邮寄方式。在实际开发中，也可以根据具体需求选择合适的参数传递方式。希望这篇文章能帮你更好地掌握 React 路由组件的传参技巧，让你的数据在组件之间 “跑” 得更顺畅！ 💨