react-router4传递数据的两种方式

使用Link

Link是react-router4中很常见的一个类，很多人在页面跳转的时候都会用到它。在用Link的时候传递数据的方法如下：

import {
      Link } from 'react-router-dom';

//不传递数据
<Link to={
     模块路径}>{
     内容}</Link>

//传递数据,在目标模块用this.props.location.state调用数据。
    <Link to={
     {
     
        pathname: {
     模块路径},
        state: {
     数据}
    }}>{
     内容}</Link>

使用history.push

react-router4中有好几种方法使用history.push。下面是BrowserRouter时使用的方法。

import {
      withRouter } from 'react-router-dom';

//不传递数据
this.props.history.push({
     目标模块路径});

//传递数据,在目标模块用this.props.location.state调用数据。
this.props.history.push({
     
    pathname:{
     目标模块路径},
    state:{
     数据}
    }）

export default withRouter(自身模块名)

区别

在点击的时候跳转并传递数据：既可用Link方法，也可以用history.push方法(需要结合Onclick方法，在点击事件的回调函数里面调用history.push)。

用js控制跳转并传递数据：只能用history.push方法。(直接在js中使用history.push)
另外说下，在模块中获取路由的/:id中的id：在this.props.match.params.id中获取。(其中id可换为其它参数。)