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>
)