React路由传参

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' }}}> 

2. JS方式

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

3. 接收值

   this.props.location.state.sex