如何在React Route路径中传递键值对参数并正确取值？

你当前的写法问题出在动态路径参数没有用斜杠和前面的路径段分隔，React Router 规定动态参数必须是独立的路径段，以:开头标识。

正确代码示例 #

1. 路由定义调整：

// 末尾的?表示color是可选参数，不传的时候值为undefined
<Route path="/location/:color?" component={Location} />

2. 跳转传值方式：

// 声明式跳转（Link组件）
<Link to="/location/red">传递color=red</Link>

// 编程式跳转（v5版本用useHistory）
import { useNavigate } from 'react-router-dom'
const navigate = useNavigate()
// 调用时传入对应参数值
navigate('/location/blue')

3. 组件内取值：

// v5版本可以直接从props取
console.log(props.match.params.color) // 上面的示例会输出red/blue

// v6版本推荐用useParams钩子
import { useParams } from 'react-router-dom'
const { color } = useParams()
console.log(color)

如果你跳转的路径是不带参数的/location，因为你设置了可选参数，color的值默认就是undefined，属于正常表现。

• 状态可持久化、可分享：URL会完整携带路径参数，用户保存链接、分享链接给其他人，打开后就能直接得到和之前完全一致的页面状态，用props传值的话刷新页面、重新打开链接都会丢失参数。
• 适配浏览器原生行为：路径参数变化会被记录到浏览器历史栈中，用户点击前进、后退按钮可以直接回到对应参数的页面状态，props传值无法支持该特性。
• 更适合跨场景传参：如果是从外部链接、其他站点跳转到你的页面，或者从完全不相关的业务页面跳转，不需要额外维护全局状态存储参数，直接拼在URL里就能完成传值。
• SEO友好：搜索引擎爬虫可以识别URL中的路径参数，对应页面内容可以被正常收录，纯props传值的动态内容爬虫无法获取。

内容的提问来源于stack exchange，提问作者happy_story