详解关于React-Router4.0跳转不置顶解决方案


Posted in Javascript onMay 10, 2019

在使用react-router时会遇到奇怪的问题,比如当我们从首页进入详情页的时候,首页跳转到详情页,首页滚动的位置,进入到详情页的时候也会被记录下来,原因是由于共享了同一个history,所以对记录有所保留,这显然不符合我们的浏览习惯。

总结种解决方案:

方案一

<Router onUpdate={() => window.scrollTo(0, 0)} history={hashHistory}>

<Route path="/" component={ App }>
</Router>

方案二

class Protol extends React.Component {

constructor(props) {
  super(props);
}
 componentDidUpdate(prevProps) {
   if (this.props.location !== prevProps.location) {
     window.scrollTo(0, 0)
   }
 }
render() {
  return (
    <div>
      <Header/>

      {this.props.children}
      <Footer/>
    </div>
  );
}
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
Oct 14 Javascript
js使用eval解析json(js中使用json)
Jan 17 Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
jsTree使用记录实例
Dec 01 Javascript
基于javascript实现按圆形排列DIV元素(三)
Dec 02 Javascript
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
vue下拉列表功能实例代码
Apr 08 Javascript
移动端如何用下拉刷新的方式实现上拉加载
Dec 10 Javascript
微信小程序使用npm包的方法步骤
Aug 13 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 Javascript
Vue使用watch监听一个对象中的属性的实现方法
May 10 #Javascript
微信小程序获取用户信息并保存登录状态详解
May 10 #Javascript
jsonp实现百度下拉框功能的方法分析
May 10 #Javascript
微信小程序用户授权,以及判断登录是否过期的方法
May 10 #Javascript
利用es6 new.target来对模拟抽象类的方法
May 10 #Javascript
Angular4.0动画操作实例详解
May 10 #Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 #Javascript
You might like
基于php设计模式中单例模式的应用分析
2013/05/15 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
js对象继承之原型链继承实例
2015/01/10 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
浅谈React中的元素、组件、实例和节点
2018/02/27 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
[53:52]OG vs EG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
详解Python之数据序列化(json、pickle、shelve)
2017/03/30 Python
python:print格式化输出到文件的实例
2018/05/14 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
Python使用matplotlib 画矩形的三种方式分析
2019/10/31 Python
利用pyshp包给shapefile文件添加字段的实例
2019/12/06 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
解锁canvas导出图片跨域的N种姿势小结
2019/01/24 HTML / CSS
recorder.js 基于Html5录音功能的实现
2020/05/26 HTML / CSS
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
Max&Co官网:意大利年轻女性时尚品牌
2017/05/16 全球购物
澳大利亚Mocha官方网站:包、钱包、珠宝和配饰
2019/07/18 全球购物
金蝶的一道SQL笔试题
2012/12/18 面试题
会计实习生自我鉴定
2013/12/12 职场文书
《大海那边》教学反思
2014/04/09 职场文书
食品质检员岗位职责
2015/04/08 职场文书
毕业实习证明范本
2015/06/16 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python
win10更新失败无限重启解决方法
2022/04/19 数码科技