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.router.push( '/sort/'+'2' )
               
    3.sort页面
      通过 this.props.params.id 就可以接受到传递过来的参数(id)

    方式 二:通过query
    前提:必须由其他页面跳过来,参数才会被传递过来
        注:不需要配置路由表。路由表中的内容照常:<Route path='/sort' component={Sort}></Route>

    1.Link处
      HTML方式
      <Link to={{ pathname : ' /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={{ pathname : ' /sort ' , state : { name : 'sunny' }}}>
      
      JS方式:
      this.props.router.push({ pathname:'/sort',state:{name : 'sunny' } })
      
    2.sort页面
      取值:this.props.location.state.name

  • 相关阅读:
    Bit Manipulation
    218. The Skyline Problem
    Template : Two Pointers & Hash -> String process
    239. Sliding Window Maximum
    159. Longest Substring with At Most Two Distinct Characters
    3. Longest Substring Without Repeating Characters
    137. Single Number II
    142. Linked List Cycle II
    41. First Missing Positive
    260. Single Number III
  • 原文地址:https://www.cnblogs.com/Ann-web-1/p/11787240.html
Copyright © 2011-2022 走看看