本文共 714 字，大约阅读时间需要 2 分钟。

React路由组件参数传递的三种方式

1. search参数传递 最常用

link标签传递

可以通过<link>标签传递search参数。例如：

这种方式无需在目标组件中声明接收，正常注册即可使用。

JS方式传递

可以使用history.push方法：

this.props.history.push({  pathname: `/home/?id=${msgObj.id} & title=${msgObj.title}`})

参数会被添加到URL的search部分。

2. state参数传递 与query参数

link标签传递

可以通过<link>标签传递state或query参数。例如：

或者：

JS方式传递

可以使用history.push方法：

this.props.history.push({  pathname: '/home',  state: { id: msgObj.id, title: msgObj.title }});this.props.history.push({  pathname: '/home',  query: { id: msgObj.id, title: msgObj.title }});

3. params参数

link标签传递

可以通过<link>标签传递params参数。例如：

params参数声明

在目标组件中可以声明接收参数：

JS方式传递

可以使用history.push方法：

this.props.history.push({  pathname: `/home/${msgObj.id}/${msgObj.title}`});