React 编程式路由三种传参方式
一、params传参
goPush=(id,title)=>{
this.props.history.push(`/home/message/detail/${
id}/${
title}`)
}
<li key={
message.id}>
<Link to={
`/home/message/detail/${
message.id}/${
message.title}`} >{
message.title}</Link>
<button onClick={
()=>this.goPush(message.id,message.title)}>push跳转</button>
<button onClick={
()=>this.goReplace(message.id,message.title)}>replace跳转</button>
</li>
<Route path='/home/message/detail/:id/:title' component={
Detail}></Route>
接收：
const {
id,title}=this.props.history.params
return (
<ul>
<li>id:{
id}</li>
<li>title:{
title}</li>
</ul>
)
二、search传参
goPush=(id,title)=>{
this.props.history.push(`/home/message/detail/?id=${
id}&title=${
title}`)
<li key={
message.id}>
<Link to={
`/home/message/detail/?id=${
message.id}&title=${
message.title}`} >{
message.title}</Link>
<button onClick={
()=>this.goPush(message.id,message.title)}>push跳转</button>
<button onClick={
()=>this.goReplace(message.id,message.title)}>replace跳转</button>
</li>
<Route path='/home/message/detail' component={
Detail}></Route>
接收：
const{
search} =this.props.location
const {
id,title}=qs.parse(search.slice(1))
return (
<ul>
<li>id:{
id}</li>
<li>title:{
title}</li>
</ul>
)
三、state传参
goPush=(id,title)=>{
this.props.history.push('/home/message/detail',{
id:id,title:title})
}
<li key={
message.id}>
<Link to={
{
pathname:'/home/message/detail',state:{
id:message.id,title:message.title}}}>{
message.title}</Link>
</li>
<Route path='/home/message/detail' component={
Detail}></Route>
接收：
const{
id,title}=this.props.location.state||{
}
return (
<ul>
<li>id:{
id}</li>
<li>title:{
title}</li>
</ul>
)