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

通过params方式传递

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

let list =  { id:1 , text:'列表一'}

<NavLink to={`/home/${list.id}/${list.text}`}>{list.text}</NavLink>


//必须在组件匹配路径中写出对应的key值( /:id/:name )
<Route path='/home/:id/:name' component={Home}/>

 

接收之后，存放在组件的props.match.param 中，可以利用解构赋值的方法将其取出并渲染：

export default function Item(props) {
    console.log(props);
    let {id,title} = props.match.params;
    return (
        <div>
            <p>id: {id}</p>
            <p>title:{title}</p>
        </div>
    )
}

通过search方式传递

此方式与url的query方式传参无异，接收时无需声明（ ?id=1&text='列表一' ）

let list =  { id:1 , text:'列表一'}

<NavLink to={`/home?id=${list.id}&title=${list.text}`}>{list.text}</NavLink>

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

可以借助querystring库将其转换成对象的形式，也可自行封装函数解析字符串，代码如下：

第一种方式：使用querystring库

import qs from 'querystring'
 
render(){
    const {search} = this.props.location  //search: '?id=001&text=列表一'
    const {id, text} = qs.parse(search.slice(1))
    return (
        <div>id: {id}, text: {text}</div>
    )
}

第二种方式：使用自行封装函数（下边的qs函数可以直接拿走使用噢！） 

export default function Item(props) {
    let query = props.location.search
// 此处的qs可以使用内置模块qs，也可使用自行封装函数解析字符串
    query = qs(query)
    return (
        <div>
            <p>id:{query.id}</p>
            <p>text:{query.text}</p>
        </div>
    )
}


//自己封装的解析函数   可以直接拿走使用！！！
function qs(str) {
    let res = {}
    str = str.slice(1)
    let arr = str.split('&')
    console.log(arr);
    for (var i = 0; i < arr.length; i++) {
        let k = arr[i].split('=')[0]
        let v = arr[i].split('=')[1]
        res[k] = v
    }
    return res
}

通过state方式传递

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

let list =  { id:1 , text:'列表一'}

<NavLink to={{pathname:'/home',state:{id:list.id,text:list.text}}}>{list.text}</NavLink>

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

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

export default function Item(props) {
   let {id,text} = props.location.state || {}

    return (
        <div>
            <p>id:{id}</p>
            <p>text:{text}</p>
        </div>
    )
}

总结：

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

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