首页 > 其他 > 详细

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

时间:2017-12-09 19:08:46      阅读:454      评论:0      收藏:0      [点我收藏+]
注意:  路由表改变后要重启服务  
   方式 一
         通过params
        1.路由表中       <Route path=‘ /sort/:id ‘   component={Sort}></Route>
           技术分享图片
        2.Link处            HTML方式
                                <Link to={ ‘ /sort/ ‘ + ‘ 2 ‘ }  activeClassName=‘active‘>XXXX</Link>              
           技术分享图片
                                JS方式
                                hashHistory.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方式
                            hashHistory.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方式
                                hashHistoy.push({ pathname:‘/sort‘,state:{name : ‘sunny‘ } })
                                  技术分享图片技术分享图片
        2.sort页面        this.props.location.state.name
                                  技术分享图片技术分享图片

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

原文:http://www.cnblogs.com/waterFowl/p/8012096.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!