要求：点击下图中的蓝色按钮(在A页面)，由A页面跳转到B页面，并携带参数storeId、orderKdAmount。以下列举了三种传参的做法:

image.png

做法一： 使用import { Link } from 'react-router-dom' + <Link to={{pathname: "",state: {} }}></Link>

A页面 html----传递storeId、orderKdAmount

<Link to={{pathname: "/fundManagementDetail",state: {localState: this.state,orderKdAmount:item.orderKdAmount,storeId:item.storeId} }}
>
<li className="operate_edit_color margin_left_right">
   <span className="iconfont iconchakanyanjingshishifenxi2"></span>
</li>
</Link>

B页面JS----获取storeId、orderKdAmount

var storeId ='';
var orderKdAmount ='';
if(this.props.location.state){
  storeId = this.props.location.state.storeId;
  orderKdAmount = this.props.location.state.orderKdAmount;
  window.location.href = window.location.href + "?orderKdAmount=" + orderKdAmount + "&storeId=" + storeId;
  if(this.props.location.state.localState!==undefined&&this.props.location.state.localState!==null){
    // 和app一样，返回上个页面时，保留上个页面上次的数据
    localStorage.setItem("fundManagementList", JSON.stringify(this.props.location.state.localState));
}

}else{
  var path = this.props.location.search; //获取默认店铺id
  storeId = path.substring(path.lastIndexOf("=") + 1);

  var startIndex1 = path.indexOf("orderKdAmount=") + 14;
  var endIndex1 = path.indexOf("&storeId=");
  var cutLength1 = endIndex1 - startIndex1;
  orderKdAmount = path.substr(startIndex1, cutLength1);
  orderKdAmount = decodeURI(orderKdAmount);
}

做法1特点：

A跳转到B页面后:
1、参数不能在浏览器中能看到;
2、可以通过代码获取参数;
3、刷新后无法通过代码获取参数;
4、可以携带json数据，近而可以通过执行localStorage.setItem("fundManagementList", JSON.stringify(this.props.location.state.localState));存储上个页面的数据到本地缓存。

补充一点：拿storeId为例，A跳转到B页面后，B页面不做处理的话，无法在链接http://localhost:3000/#/fundManagementDetail中看到参数storeId，但可以通过this.props.location.state.storeId获取参数。
这样会有一个问题，刷新B页面后，再通过this.props.location.state.storeId这句代码就无法获取到storeId了。可以通过window.location.href = window.location.href + "?orderKdAmount=" + orderKdAmount + "&storeId=" + storeId;这种方式处理，让storeId显示到浏览器上(http://localhost:3000/#/fundManagementDetail?orderKdAmount=22.9&storeId=384)，从而走下面else代码的逻辑。
注意:这种处理方式有一个问题，按1次浏览器的返回键并不会返回A界面，而是仍然停留在B界面,按第2次才会返回A界面。因为window.location.href = window.location.href + "?orderKdAmount=" + orderKdAmount + "&storeId=" + storeId;这句代码的修改了B页面的原有链接，按1次返回只会恢复到B页面不带参数的那种，即由http://localhost:3000/#/fundManagementDetail?orderKdAmount=22.9&storeId=384恢复为http://localhost:3000/#/fundManagementDetail

做法二： 使用import { Link } from 'react-router-dom' + <Link to={}></Link>

A页面html

<Link to={"/fundManagementDetail/?orderKdAmount=" + item.orderKdAmount + "&storeId=" + item.storeId}
>
<li className="operate_edit_color margin_left_right">
   <span className="iconfont iconchakanyanjingshishifenxi2"></span>
</li>
</Link>

B页面JS----获取storeId

var path = this.props.location.search; 
var storeId = path.substring(path.lastIndexOf("=") + 1);
var startIndex1 = path.indexOf("orderKdAmount=") + 14;
var endIndex1 = path.indexOf("&storeId=");
var cutLength1 = endIndex1 - startIndex1;
var orderKdAmount = path.substr(startIndex1, cutLength1);
orderKdAmount = decodeURI(orderKdAmount);

做法2特点：

A跳转到B页面后:
1、参数在浏览器中能看到;
2、可以通过代码获取参数;
3、刷新也可以通过代码获取参数;
4、不可以携带json数据，所以就无法通过执行localStorage.setItem("fundManagementList", JSON.stringify(this.props.location.state.localState));存储上个页面的数据了

---

做法三：onClick

A页面html

<li className="operate_edit_color margin_left_right"   onClick={() => this.seeDetailFunc(item)}>
<span className="iconfont iconchakanyanjingshishifenxi2"></span>
</li>

A页面JS----传递storeId、orderKdAmount、A页面的this.state中的所有值

seeDetailFunc(item) {
  this.props.history.push({
    pathname: '/fundManagementDetail',
    search:'orderKdAmount=' + item.orderKdAmount + '&storeId=' + item.storeId+'',
    state: {localState: this.state}// A页面的this.state中的所有值
  })
}

B页面JS----获取storeId、orderKdAmount、存储上个页面A的this.state中的所有值到本地缓存

var path = this.props.location.search; 
var storeId = path.substring(path.lastIndexOf("=") + 1);
var startIndex1 = path.indexOf("orderKdAmount=") + 14;
var endIndex1 = path.indexOf("&storeId=");
var cutLength1 = endIndex1 - startIndex1;
var orderKdAmount = path.substr(startIndex1, cutLength1);
orderKdAmount = decodeURI(orderKdAmount);

if(this.props.location.state){// 未刷新页面走此逻辑
  if(this.props.location.state.localState!==undefined&&this.props.location.state.localState!==null){
    // 和app一样，返回上个页面时，保留上个页面this.state中的上次的数据
    localStorage.setItem("fundManagementList", JSON.stringify(this.props.location.state.localState));
  }
}

做法3特点：

A跳转到B页面后:
1、参数在浏览器中能看到;
2、可以通过代码获取参数;
3、刷新也可以通过代码获取参数;
4、可以携带json数据，近而可以通过执行localStorage.setItem("fundManagementList", JSON.stringify(this.props.location.state.localState));存储上个页面的数据到本地缓存。

总结：

1、如果A页面到B页面仅仅传递普通字符串，可以使用做法二和做法三；
2、如果A页面到B页面需要传递json字符串，使用方法三。
3、做法一不建议用。

综上所述，做法三通用性更广。