首页 > 其他 > 详细

react-router带参数及覆盖state方法

时间:2020-03-27 10:12:47      阅读:143      评论:0      收藏:0      [点我收藏+]

背景
  项目中经常出现页面间跳转并需要携带参数的情况,我们使用了react-router组件实现。

问题
  通过this.props.history.push(url, state)方法进行页面跳转同时带上state参数,但带参数到目标页面后刷新目标页面参数仍然存在。如存在页面A和页面B,当页面A带参数sysName=XXX跳转页面B,页面B打开后收到参数XXX并展示XXX的相关内容,在用户主动刷新页面B的时候,this.props.history.location.state的参数是仍然存在的,所以页面B还会继续显示XXX的相关内容。

解决办法
  当目标页面初始化时判断当前路由有带参数过来,将参数取出来,同时覆盖参数,当用户再次主动刷新目标页面时,路由中的参数已经没有了,就能进行正常的初始化逻辑。
  通过history对象的replace方法实现:this.props.history.replace(当前url, {}),这样操作会替换掉state但不会刷新页面。

react-router带参数及覆盖state方法

原文:https://www.cnblogs.com/wurijie/p/12579279.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!