【React】路由组件跳转页面并存储参数

记录目前用的比较舒服的方式：

1、跳转

<Button type="secondary" size='small'  >
              <Link to={{ pathname: '/base/strategyList',search:id+'', query: {sceneId:id,record:record} }}>查看</Link>
            </Button>&nbsp;

跨tab传参：

    <Link target="_blank" to={{ pathname: '/ticket/detail?ticketId='+value }}>查看</Link>

OR

  <Link   style={styles.link} to={'/goods/goodsHotel/Detail?1=1&optionType=edit&tabValue=1&hid=' + record.hid}>查看</Link>

2、获取值：

  componentDidMount() {
    const {dispatch,location}=this.props;

    let recvParam;

    if(location.query&&location.query.record){//判断当前有参数
      recvParam=location.query.record;
      sessionStorage.setItem('data',recvParam);// 存入到sessionStorage中
    }else{
      recvParam=sessionStorage.getItem('data');// 当state没有参数时，取sessionStorage中的参数
    }

    this.setState({
      recvParam
    })

    console.log("recvParam",recvParam)
  }

3、事件触发型（转载，原文的方式正确，但是语法错误，需要参照最下面的语法）

      原文链接：https://blog.csdn.net/wgs_1111/article/details/101517247

原文：
从A页面跳转到B页面
第一种：
A页面 传参数
this.props.history.push{
pathname:’/router/url/send’,
query:{
“oneFlag”:one,
…
}
}
B页面 接收参数
this.props.location.query.oneFlag // one
…
路由路径显示：‘#/router/url/send/oneFlag?one’

第二种：
A页面 传参数
this.props.history.push{
pathname:’/router/url/send’,
state:{
“oneFlag”:one,
…
}
}
B页面 接收参数
this.props.location.state.oneFlag // one

更正语法：

 this.props.history.push(
      {
        pathname: '/dashboard',
         state: {
         names:'one'
        }
      }
    )
    //取值：this.props.location.state.names

返回上层路由：

   this.props.history.goBack();