React 编程式路由三种传参方式

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>&nbsp;                              
                                <button onClick={()=>this.goPush(message.id,message.title)}>push跳转</button>&nbsp;&nbsp;
                                <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>&nbsp;                              
                                <button onClick={()=>this.goPush(message.id,message.title)}>push跳转</button>&nbsp;&nbsp;
                                <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>
    )