zoukankan      html  css  js  c++  java
  • React路由传参的三种方式

       方式 一

             通过params
            1.路由表中      
                  <Route path=' /sort/:id '   component={Sort}></Route>
               
            2.Link处        
                HTML方式
                     <Link to={ ' /sort/ ' + ' 2 ' }  activeClassName='active'>XXXX</Link>              
               
              JS方式
                    this.props.history.push(  '/sort/'+'2'  )
               
            3.sort页面       
                   通过  this.props.match.params.id        就可以接受到传递过来的参数(id)
               
       方式 二
             通过query
                    前提:必须由其他页面跳过来,参数才会被传递过来
            注:不需要配置路由表。路由表中的内容照常:<Route path='/sort' component={Sort}></Route>
            1.Link处      
             HTML方式
                <Link to={{ path : ' /sort ' , query : { name : 'sunny' }}}>
              
           JS方式
                this.props.history.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.history.push({ pathname:'/sort',state:{name : 'sunny' } })
                                      
            2.sort页面       
                this.props.location.state.name
                                      
    history
  • 相关阅读:
    联想 Vibe Shot(Z90-3) 免recovery 获取ROOT权限 救砖 VIBEUI V3.1_1625
    联想 Z5S(L78071)免解锁BL 免rec 保留数据 ROOT Magisk Xposed 救砖 ZUI 10.5.370
    联想 Z5(L78011) 免解锁BL 免rec 保留数据 ROOT Magisk Xposed 救砖 ZUI 10.5.254
    联想 S5 Pro(L78041)免解锁BL 免rec 保留数据 ROOT Magisk Xposed 救砖 ZUI 5.0.123
    第二阶段 冲刺八
    第二阶段 冲刺七
    第二阶段 冲刺六
    第二阶段 冲刺五
    代码大全阅读笔记03
    学习进度十二
  • 原文地址:https://www.cnblogs.com/houjl/p/10056718.html
Copyright © 2011-2022 走看看