react-router路由传参数

通配传参

1、 使用props.params 传值

//Link组件，路由跳转，类似于a标签
list

//子组件中获取参数
this.props.match.params.id

如果需要传对象的话，可先将对象转化为字符串（使用JSON.stringify(str)将对象转化为字符串，在子组件中再将字符串转化为对象）,参数太多时，URL变长

2、使用query定义传值方式

//在Link组件中定义参数

const param ={
    pathname:"/query",
    query:"参数"
}

List

//在子组件中获取参数值

this.props.location.query

这种方式，可以直接传对象，单但是页面刷新后，参数丢失

3、state传值方式,和query相似：

List

//在子组件中获取参数值
this.props.location.state

可传对象，页面刷新，参数丢失。

react路由设置中，除了标签以外，还有一个this.props.history.push，设置落雨跳转和传值：

第一种方式：在父组件中，设置路由标签：

About

第二种方式：在父组件中，设置点击事件：

About

//js
click(){
    this.props.history.push({ pathname: "/about", state: { id } });
}

子组件中获取参数

this.props.location.state.id