react-router路由传参数

通配传参

1、使用props.params 传值

<Route path="/path/:id" component={App} />

//Link组件，路由跳转，类似于a标签
<Link to="/path/id">list</Link>

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

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

2、使用query定义传值方式

<Route path="/query" component={App} />

//在Link组件中定义参数

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

<Link to={param}>List</Link>

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

this.props.location.query

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

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

<Route path="/state component={App} />

//在Link组件中定义参数

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

<Link to={param}>List</Link>

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

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

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

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

<Link to="/about/:id">About</Link>

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

<div onClick={this.click.bind(this)}>About</div>

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

子组件中获取参数

this.props.location.state.id

react-router路由传参数

通配传参

推荐阅读更多精彩内容