详解关于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 屏蔽鼠标键盘的几段代码
Jan 02 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
javascript折半查找详解
Jan 26 Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 Javascript
详解Angular的双向数据绑定(MV-VM)
Dec 26 Javascript
JavaScript通过filereader接口读取文件
May 10 Javascript
Ionic3 UI组件之Gallery Modal详解
Jun 07 Javascript
JavaScript链式调用实例浅析
Dec 19 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 Javascript
JS 事件机制完整示例分析
Jan 15 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中的多种加密技术及代码示例解析
2016/10/20 PHP
PHP实现执行外部程序的方法详解
2017/08/17 PHP
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
jquery下实现overlay遮罩层代码
2010/08/25 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
jquery 插件实现多行文本框[textarea]自动高度
2015/03/04 Javascript
jQuery的position()方法详解
2015/07/19 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
JavaScript运动原理基础知识详解
2020/04/02 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
2020/08/03 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
Python中的匿名函数使用简介
2015/04/27 Python
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
matplotlib绘制符合论文要求的图片实例(必看篇)
2017/06/02 Python
浅谈使用Python内置函数getattr实现分发模式
2018/01/22 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
Python爬虫之pandas基本安装与使用方法示例
2018/08/08 Python
python使用PyQt5的简单方法
2019/02/27 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
介绍一款python类型检查工具pyright(推荐)
2019/07/03 Python
Python re 模块findall() 函数返回值展现方式解析
2019/08/09 Python
PyQt5中多线程模块QThread使用方法的实现
2020/01/31 Python
美国知名艺术画网站:Art.com
2017/02/09 全球购物
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
行政管理毕业生自荐信
2014/02/24 职场文书
学生会主席演讲稿
2014/04/25 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书
SpringRetry重试框架的具体使用
2021/07/25 Java/Android
低门槛开发iOS、Android、小程序应用的前端框架详解
2021/10/16 Javascript
配置nginx负载均衡
2022/05/06 Servers
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers