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

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

作者: Jess_ce | 来源:发表于2019-06-18 16:25 被阅读0次

第一种方式:

1、路由配置

     <Route key="about" path='/about/:id' component={About}/>

跳转前页面

2.Link处

    HTML

   <Link to={`/about/${id}`} >点击跳转</Link>

   JS

   this.props.history.push(`/about/${456}`);

3、跳转后页面about获取参数

   this.props.match.params.id

第二种方式:

通过query

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

注:不需要配置路由表。路由表中的内容照常:

        1.Link处      

         HTML方式

            <Link to={{ pathname: ' /about' , query : { id: 4567 }}}>

       JS方式

            this.props.history.push({ pathname : '/about' ,query : { id: 4567} })

        2.about页面     

              this.props.location.query.id

第三种方式:

通过state

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

1.Link 处      

   HTML方式:

    <Link to={{ pathname : ' /about' , state : { id: 4567}}}> 

     JS方式:

      this.props.history.push({ pathname:'/about',state:{id: 4567 } })

        2.user页面       

            this.props.location.state.id

相关文章

网友评论

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

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