React中路由传参及接收参数的方式react-router-dom4.3.1

方式1：通过params

1.法一（在刷新页面的时候，参数不会丢失。）

   (1)路由表中 
   <Route path=' /user/:id '   component={User}></Route>　　
   (2)Link处   （跳转user页面）　
   HTML方式:    <NavLink to={ ' /user/ ' + ' 2 ' }>用户</NavLink> 
   JS方式:    this.props.history.push('/user/'+'2')　
    (3)user页面
    this.props.match.params.id　　

2.法二（在刷新页面的时候，参数丢失。）
JS方式:   this.props.history.push({ pathname: '/user' , params : { id: '2' }})
user页面:  this.props.location.params.id

方式2：通过query（在刷新页面的时候，参数丢失。）

(1)路由表中 
<Route path="/role" component={role}/>
(2)Link处   （跳转role页面）
HTML方式：
var data = {id:3};
var path = {
  pathname:'/role',
  query:data,
}
<NavLink  to={path} >日志</NavLink>
JS方式：
this.props.history.push({ pathname: '/three' , query : { id: '6666' }})
(3)role页面
this.props.location.query.id

方式3：通过state（在刷新页面的时候，参数不会丢失。）

(1)路由表中 
<Route path="/role" component={role}/>
(2)Link处   （跳转role页面）
HTML方式：
var data = {id:3};
var path = {
  pathname:'/role',
  state:data,
}
<NavLink  to={path} >日志</NavLink>
JS方式：
this.props.history.push({ pathname: '/three' , state: { id: '6666' }})
(3)role页面
this.props.location.state.id