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

第一种方式：

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