1 通过query传参
link标签上使用
<Link to={{pathname:'/detail/',query:{'id': data.id} }}>
js上使用
this.props.history.push({pathname:'/search', query:{'type': type,'keyword': value}})
参数获取
console.log(this.props.location.query) //获取到传递过来的query对象
链接上会直接带'?id=1&type=a'这样的参数,需要自己手动使用query-string这样的库或者手动处理,对参数解析。利用location.search处理
this.props.history.push传递的是一个对象,其实query可以用其他代替(想取啥取啥),同时在this.props.location中可以获取到
另外通过这种方式传递参数时,链接上并不显示相应的文字,想要加上的话,就在push的对象上加上search字段,一定要传字符串!
2 通过params传参
在路由表中:
<Route path="/search/:type/:keyword?" component={Search} />
Link处使用
<Link to={'/detail/' + data.id}>
js跳转
this.props.history.push('/detail/' + id) //页面跳转
this.props.history.replace('/detail/' + id) //参数改变重新当前页面渲染