【React】路由组件传递参数(params,search,state)

react向路由组件传递参数

params参数

1、路由链接携带参数

<Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>

2、注册路由（声明接受）

<Route path='/home/message/detail/:id/:title' component={Detail}>

3、接收参数

const {id,title} = this.props.match.params

完整代码展示：

import React, { Component } from 'react'
import Detail from './Detail/index'
import { Link , Route } from 'react-router-dom'
export default class index extends Component {
    state = {
        messageArr: [
            {id:'01',title:'111'},
            {id:'02',title:'121'},
            {id:'03',title:'131'},
        ]
    }
  render() {
    const {messageArr} = this.state
    return (
        <div>
        <ul>
            {
                messageArr.map((msgObj)=> {
                    return (
                    <li key={msgObj.id}>
                        <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>
                    </li>
                        //第一步
                    )
                })
            }
        </ul>
        <hr />
            <Route path='/home/message/detail/:id/:title' component={Detail}>
                //第二步
            </Route>
      </div>
    )
  }
}

//第三步 在其他路由组件中接受参数
    const {id,title} = this.props.match.params

search参数

1、路由链接携带参数

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

2、注册路由但不需要声明

<Route path='/home/message/detai' component={Detail}>

3、接收参数

this.props.location.search

但是在接收参数时获取到的是urlencoded编码字符串，需要借助querystring解析，但是querystring已被弃用，解决方法请参考文章

state参数

1、路由链接携带参数：

<Link to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}</Link>

2、注册路由但不需要声明

<Route path='/home/message/detai' component={Detail}>

3、接收参数

this.props.location.state

state刷新时也可以保留参数