要求：点击下图中的蓝色按钮(在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、做法一不建议用。
综上所述，做法三通用性更广。
