码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-12-09 19:22:35      阅读:1425      评论:0      收藏:0      [点我收藏+]

标签:oca   png   注意   location   接受   通过   技术分享   alt   配置路由   

注意:  路由表改变后要重启服务  
   方式 一
         通过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中路由传参及接收参数的方式

标签:oca   png   注意   location   接受   通过   技术分享   alt   配置路由   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!