详解关于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 相关文章推荐
JavaScript页面刷新与弹出窗口问题的解决方法
Mar 02 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
jQuery拖拽div实现思路
Feb 19 Javascript
使用AngularJS实现可伸缩的页面切换的方法
Jun 19 Javascript
JavaScript阻止回车提交表单的方法
Dec 30 Javascript
浅谈bootstrap源码分析之tab(选项卡)
Jun 06 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 Javascript
webpack-dev-server自动更新页面方法
Feb 22 Javascript
如何使用JavaScript实现栈与队列
Jun 24 Javascript
单线程JavaScript实现异步过程详解
May 19 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 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
FCKeditor添加自定义按钮
2008/03/27 PHP
Wordpress php 分页代码
2009/10/21 PHP
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
基于PHP的登录和注册的功能的实现
2020/08/06 PHP
js可突破windows弹退效果代码
2008/08/09 Javascript
js操作iframe父子窗体示例
2014/05/22 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
jQuery中的siblings用法实例分析
2015/12/24 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
JavaScript纯色二维码变成彩色二维码
2020/07/23 Javascript
微信小程序如何像vue一样在动态绑定类名
2018/04/17 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
python中list循环语句用法实例
2014/11/10 Python
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
Scrapy抓取京东商品、豆瓣电影及代码分享
2017/11/23 Python
对python中的logger模块全面讲解
2018/04/28 Python
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
详解Python Matplotlib解决绘图X轴值不按数组排序问题
2019/08/05 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
购买美国制造的相框和画框架:Picture Frames
2018/08/14 全球购物
物流管理毕业生自荐信
2013/10/24 职场文书
文明村创建实施方案
2014/03/27 职场文书
个人主要事迹材料
2014/08/26 职场文书
环卫处个人工作总结
2015/03/04 职场文书
民事答辩状格式范文
2015/05/21 职场文书
大国崛起英国观后感
2015/06/02 职场文书
python读取pdf格式文档的实现代码
2021/04/01 Python
python控制台打印log输出重复的解决方法
2021/05/14 Python
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL