React 必知必会--路由传参的3种方式

方式一： params

（1）路由表中：

   <Route path=' /sort/:id '   component={Sort}></Route>

(2)添加跳转链接

1.HTML方式：

 <Route path=' /sort/:id '   component={Sort}></Route>

2.js方式（在点击事件上添加）：

   this.props.router.push(  '/sort/'+'2'  )

（3）页面接收
通过 this.props.params.id

##方式二： query

前提：必须由其他页面跳过来，参数才会被传递过来
（1）. 添加跳转链接
1. HTML方式

  <Link to={{ path : ' /sort ' , query : { name : 'sunny' }}}>

2.JS方式

   this.props.router.push({ path : '/sort' ,query : { name: ' sunny'} })

（2）页面接收

this.props.location.query.name

方式三： state 同query差不多，只是属性不一样，而且state传的参数是加密的，query传的参数是公开的，在地址栏url处会显示

（1）. 添加跳转链接
1. HTML方式

     <Link to={{ path : ' /sort ' , state : { name : 'sunny' }}}> 

2.JS方式

     this.props.router.push({ pathname:'/sort',state:{name : 'sunny' } })

（2）页面接收

   this.props.location.state.name