当前位置：首页 > news >正文

告别数据孤岛！React 路由 3 种传参方法全解析

news 2025/8/13 5:31:43

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}`);
}