目 录CONTENT

文章目录

React路由传参

Administrator
2020-07-24 / 0 评论 / 0 点赞 / 7515 阅读 / 1919 字

react-router路由传参

方式一:通过params

  1. 路由表中

    <Route path=' /test/:id '   component={test}></Route>
    
  2. Link

    <Link to={ ' /test/ ' + ' 2 ' }  activeClassName='active'>XXXX</Link>        
    
  3. JS方式

     this.props.history.push(  '/user/'+'2'  )
    
  4. 接收值

     通过  this.props.match.params.id       就可以接受到传递过来的参数(id)
    

方式二:通过query

前提:必须由其他页面跳过来,参数才会被传递过来

注:不需要配置路由表。路由表中的内容照常像下面这样配置

<Route path='/test' component={test}></Route>
  1. Link

     <Link to={{ pathname: '/test' , query : { type: 'sex' }}}>
    
  2. JS方式

    this.props.history.push({ pathname : '/test' ,query : { type: 'sex'} })
    
  3. 接收值

    this.props.location.query.sex
    

    注意:建议不用,刷新页面时丢失

方式三:通过state

同query差不多,只是属性不一样,而且state传的参数是加密的,query传的参数是公开的,在地址栏

  1. Link
<Link to={{ pathname : ' /test' , state : { type: 'sex' }}}> 
  1. JS方式

    this.props.history.push({ pathname:'/test',state:{type: 'sex' } })
    
  2. 接收值

    this.props.location.state.sex
    
0

评论区