React+umi 的 link 带参数跳转的坑
本帖最后由 周大胖子 于 2020-11-27 10:09 编辑UMI link 带参 不跳转问题 -。-
问题表述：
React Router为何在url相同参数不同的情况下跳转但是并不刷新页面？ 我有个商品详情页面，url是/detail:235，这个页面中有个“猜你喜欢”模块，:后面跟的是每个商品的skuId号码，点击其中某个商品图标后仍然要跳转到/detail下，只是后面跟的skuId变了。现在的问题是，点击后只是看到地址栏后面跟的skuId确实变了，但是页面并没有刷新或者跳转，仍然处于之前的商品页面，请教大家如何解决？
这个问题的解决方式，其实就是网上那种：
使用 componentWillReceiveProps(nextProps) { let classid = nextProps.match.params.classid;｝，然后对之后的代码进行操作。
第二个坑：
开始会有警告：componentWillReceiveProps has been renamed, and is not recommended for use.【componentWillReceiveProps已重命名，不建议使用。】
将数据获取代码或副作用移动到componentDidUpdate ；
按理说，他既然给推荐，那么componentDidUpdate与componentWillReceiveProps应该一样喽？
实际的差别其实很大，componentWillReceiveProps，点击则内部参数发生变化。 componentDidUpdate点第二次 才TM的 发生变化！
所以我 决定，既然警告，我不理他，不升级 react 到17 不就行了？[ -.- 嗯这就是我 目前的解决方式]
componentWillReceiveProps(nextProps) {
// 这个挂载的操作 得到的结果是正常的，但是下面componentDidUpdate 是不正常的，慢了一步
// console.log( '6666' +nextProps.match.params.classid)
if(nextProps.match.params.classid){
let classid = nextProps.match.params.classid;
if( this.state.classid ){
console.log( this.state.classid +'----'+classid)
if( this.state.classid == classid){
// console.log('分类没换，只是换了页码')
}else{
// console.log('换分类了')
this.setState({
classid:classid
})
// 派发action 的一套
this.getNewTypeList( classid );
}
}
}
}再贴个componentDidUpadte// 监听变化，由于部分带参函数
componentDidUpdate(nextProps) {
// 这里还有个问题，我得点两次 这里面的nextProps.match.params.classid 才会换掉
// console.log(nextProps.match.params.classid)
// 判断有没有分类
// if(nextProps.match.params.classid){
// let classid = nextProps.match.params.classid;
// if( this.state.classid ){
// console.log( this.state.classid +'----'+classid)
// if( this.state.classid == classid){
// console.log('分类没换，只是换了页码')
// }else{
// console.log('换分类了')
// }
// }
// }
// console.log(nextProps.match.params.classid)
}
页:
[1]