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

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 方法去除第一个字符

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