React中路由傳參及接收參數的方式(最新react-router-dom^4.2.2的寫法)

注意:  路由表改變後要重啓服務  
   方式 一:
         通過params
        1.路由表中      
              <Route path=' /user/:id '   component={User}></Route>
           
        2.Link處        
            HTML方式
                 <Link to={ ' /user/ ' + ' 2 ' }  activeClassName='active'>XXXX</Link>              
           
          JS方式
                this.props.history.push(  '/user/'+'2'  )
           
        3.user頁面       
               通過  this.props.params.id        就可以接受到傳遞過來的參數(id)
           
   方式 二:
         通過query
                前提:必須由其他頁面跳過來,參數纔會被傳遞過來
        注:不需要配置路由表。路由表中的內容照常:<Route path='/user' component={User}></Route>
        1.Link處      
         HTML方式
            <Link to={{ pathname: ' /user' , query : { day: 'Friday' }}}>
          
       JS方式
            this.props.history.push({ pathname : '/user' ,query : { day: 'Friday'} })
 
        2.user頁面     
              this.props.location.query.day
                                
     方式 三:
        通過state
            同query差不多,只是屬性不一樣,而且state傳的參數是加密的,query傳的參數是公開的,在地址欄
        1.Link 處      
          HTML方式:
                <Link to={{ pathname : ' /user' , state : { day: 'Friday' }}}> 
                                  
         JS方式:
            this.props.history.push({ pathname:'/user',state:{day : 'Friday' } })
                                  
        2.user頁面       
            this.props.location.state.day
--------------------- 
作者:IT農工-Don 
來源:CSDN 
原文:https://blog.csdn.net/qq_24504591/article/details/78973633 
版權聲明:本文爲博主原創文章,轉載請附上博文鏈接!

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章