React页面传递参数（react单页面跳转和react打开新窗口）

react route 页面跳转参数传递（4.0版本）

React页面跳转传递参数，react打开新页面传递参数我将通过下面代码来说明。

首先两者传递参数方式区别不大，我将通过react Link标签来为大家说明，废话不多说，上代码

下面代码块是父级页Link代码示例，此时传递的数据存放在RouteComponentProps.history.location中，所以页面需要继承RouteComponentProps，我采用的是4.0版本的

<Link
    // 弹出新的选项卡只能用search来传递数据，单页面的话可以使用state
    // 注意，此处search传递是以URL拼接的方式传递传递长度根据浏览器限制来的，只能传递字符串，
    // 还有search传递过去的参数会默认追加一个? e.g search?id=1
    // state则没有限制，可直接传递obj
    to={{ pathname: "/maker/bill/detail/supplement", search: JSON.stringify(billDetailObj) }}
    target="_blank"
    // 当target="_blank"打开新页面的时候，state内容无法传递
    state：{id:1}
    className="fontBlue fontWeight">
     打开新页面
</Link>

子级页面接收：

刚已经说了，用到路由传递参数的需要继承RouteComponentProps，所以子级页面要记得继承，不然哪里去拿history.location对吧，下面上代码，需要注意的是记得构造函数初始化一下自己定义的参数，因为我用ts，所以做了强类型

// 页面初始化加载
  public componentDidMount() {
    console.log("新打开窗口，下面是传递过来的参数");
    debugger
    // 从ocation中取出search
    let search = this.props.history.location.search
    // TODO 调试完毕以后需要在这里增加判断，如果该参数为空则非正常途径进入需要跳转到账单主页
    // 这里是因为默认前面有一个?,切掉
    search = search.substr(1,search.length);
    // 因为传递的有中文，所以此处需要decodeURI进行URL解码
    const searchObj:BillDetail = JSON.parse(decodeURI(search));
    console.log(searchObj);
    // 将处理完毕的数据更新至state，并渲染到页面
    this.setState({
      billdDetail:searchObj
    })
  }