美文网首页
react-router-dom 组件之间跳转传递参数

react-router-dom 组件之间跳转传递参数

作者: 使劲挤海绵 | 来源:发表于2018-02-11 10:26 被阅读2492次

    方式一:

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

    Link处
    HTML方式
          <Link to={{ pathname: ' /user' , query : { day: 'Friday' }}}>
    
    JS方式
    this.props.history.push({ pathname : '/user' ,query : { day: 'Friday'} })
    user页面:this.props.location.query.day
    

    方式二:

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

    Link处
      HTML方式:<Link to={{ pathname : ' /user' , state : { day: 'Friday' }}}> 
    
    JS方式:
    this.props.history.push({ pathname:'/user',state:{day : 'Friday' } })
    //user页面       
    this.props.location.state.day
    

    相关文章

      网友评论

          本文标题:react-router-dom 组件之间跳转传递参数

          本文链接:https://www.haomeiwen.com/subject/mndktftx.html