React中路由传参及接收参数的方式

Posted 好好学习,天天向上

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React中路由传参及接收参数的方式相关的知识,希望对你有一定的参考价值。

注意:  路由表改变后要重启服务  
   方式 一
         通过params
        1.路由表中      
              <Route path=\' /sort/:id \'   component={Sort}></Route>
           
        2.Link处        
            html方式
                 <Link to={ \' /sort/ \' + \' 2 \' }  activeClassName=\'active\'>XXXX</Link>              
           
          JS方式
                this.props.router.push(  \'/sort/\'+\'2\'  )
           
        3.sort页面       
               通过  this.props.params.id        就可以接受到传递过来的参数(id)
           
   方式 二
         通过query
                前提:必须由其他页面跳过来,参数才会被传递过来
        注:不需要配置路由表。路由表中的内容照常:<Route path=\'/sort\' component={Sort}></Route>
        1.Link处      
         HTML方式
            <Link to={{ path : \' /sort \' , query : { name : \'sunny\' }}}>
          
       JS方式
            this.props.router.push({ path : \'/sort\' ,query : { name: \' sunny\'} })
 
        2.sort页面     
              this.props.location.query.name
                                
     方式 三
        通过state
            同query差不多,只是属性不一样,而且state传的参数是加密的,query传的参数是公开的,在地址栏
        1.Link 处      
          HTML方式
                <Link to={{ path : \' /sort \' , state : { name : \'sunny\' }}}> 
                                  
         JS方式
            this.props.router.push({ pathname:\'/sort\',state:{name : \'sunny\' } })
                                  
        2.sort页面       
            this.props.location.state.name
                                  

以上是关于React中路由传参及接收参数的方式的主要内容,如果未能解决你的问题,请参考以下文章

react路由传参的三种方式:

通过Vue路由传参的两种方式及Vue组件中接收参数的方式

通过Vue路由传参的两种方式及Vue组件中接收参数的方式

url传参及重定向

路由传参并接收参数

微信小程序 之 分享给朋友 以及二维码传参及接收