React中的路由传参

1,751 阅读1分钟

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)   //参数改变重新当前页面渲染