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

通过params方式传递

通过params参数向路由组件传递参数。传递时像写多级路由一样，路由组件需要用:id   :name来接收

let obj = {id:'001', name='gailun'}
{obj.name}

 接收之后，存放在组件的this.props.match.params中，将其取出并渲染

render(){
    const {id, name} = this.props.match.params
    return (
        
id: {id}, name: {name}
    )
}

通过search方式传递

此方式与url的query方式传参无异，接收时无需声明

let obj = {id:'001', name='gailun'}
{obj.name}

 最终参数放在了this.props.location.search中，但取出来的参数是字符串 '?id=001&name=gailun' 

 需要借助querystring库将其转换成对象的形式，代码如下

import qs from 'querystring'

render(){
    const {search} = this.props.location  //search: '?id=001&name=gailun'
    const {id, name} = qs.parse(search.slice(1))
    return (
        
id: {id}, name: {name}
    )
}

通过state方式传递

传递时使用对象形式，接收时不需要声明

let obj = {id:'001', name='gailun'}
{obj.name}

参数存放在了this.props.location.state中，这种方式地址栏不会有额外增加内容，但是它有缓存，所以即使刷新了也能记住传递的参数。

但是如果把浏览器缓存清除了那么this.props.location.state为undefined，从它身上取值会报错，所以需要使用 || 来预防

render(){
    const {id, name} = this.props.location.state || {}
    return (
        
id: {id}, name: {name}
    )
}

总结

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

• params方式，类似多级路由方式传递，数据存放在this.props.match.params中
• search方式，与url的query方式相同，数据存放在this.props.location.search中，格式为字符串
• state方式，使用对象的形式传递，数据存放在this.props.location.state中，url不会有变化，通过缓存来保存数据