react中向路由组件传递参数的三种方式

一、向路由组件传递 Params参数

1.1、用法：
1.1.1、路由链接的写法
在路由链接的 url 中添加要传递的参数
在路径后面加上 /参数
如我们要传递一个 tom,18

 <Link to={`/home/message/detail/tom/18`}>{msgObj.title}</Link>

1.1.2、注册路由的写法
在注册路由的 path 中声明要接受的参数
在路径后面加上 /:要接受的参数名(这个名字随便取，只是用来接收参数)

 <Route path="/home/message/detail/:name/:age" component={Detail}/>

1.1.3、接收 params参数 的写法
params参数 在 this.props.match.params 中
属性名和你声明的名称一样。

const {name,age} = this.props.match.params

二、向路由组件传递 search参数

2.1、用法：
2.1.1、路由链接的写法
在路由链接的 url 中添加要传递的参数
在路径后面加上 /?参数名=参数值
如果有多个参数 就在第一个参数值后面加上 & 然后继续写参数
如我们要传递一个 tom,18

 <Link to={`/home/message/detail/?name=tom&age=18`}>{msgObj.title}</Link>

2.1.2、注册路由的写法
正常注册即可，无需声明接收

 <Route path="/home/message/detail" component={Detail}/>

2.1.3、接收 search参数 的写法
search参数 在 this.props.location 中
内容为 ?name=tom&age=18 这种格式叫做 urlencoded
需要我们做处理，推荐使用 querystring 工具
直接引入工具

 import qs from 'qs' //老版本引入 querystring

最终写法

 const { search } = this.props.location
 const {id,title} = qs.parse(search.slice(1))
  //由于第一个字符是？，所以使用 slice 方法去除第一个字符

三、向路由组件传递 state参数

3.1、用法：
3.1.1、路由链接的写法
给to 传递一个对象，对象有两个属性：
第一个属性 pathname ：路由地址
第二个属性 state：一个对象，里面写你要传递的参数

 <Link to={{pathname:'/home/message/detail',state:{name:'tom',age:18}}}>{msgObj.title}</Link>

3.1.2、注册路由的写法
正常注册即可，无需声明接收

 <Route path="/home/message/detail" component={Detail}/>

3.1.3、接收 参数 的写法
state参数 在 this.props.location.state 中

const { name,age} = this.props.location.state

个人博客：余生的学习笔记