通配传参
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路由设置中,除了标签以外,还有一个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