详解关于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 继承实现例子
Aug 12 Javascript
JavaScript 应用技巧集合[推荐]
Aug 30 Javascript
javascript日期处理函数,性能优化批处理
Sep 06 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
解析javascript瀑布流原理实现图片滚动加载
Mar 10 Javascript
Bootstrap零基础入门教程(二)
Jul 18 Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 Javascript
layui前段框架日期控件使用方法详解
May 19 Javascript
老生常谈js数据类型
Aug 03 Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
JavaScript解析及序列化JSON的方法实例分析
Jan 04 Javascript
vue中$nextTick的用法讲解
Jan 17 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学习之PHP运算符
2006/10/09 PHP
set_include_path在win和linux下的区别
2008/01/10 PHP
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
PHP通过curl获取接口URL的数据方法
2018/05/31 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
laravel入门知识点整理
2020/09/15 PHP
JS 文件大小判断的实现代码
2010/04/07 Javascript
基于jquery的模态div层弹出效果
2010/08/21 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
重写javascript中window.confirm的行为
2012/10/21 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
2016/11/09 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
jquery向后台提交数组的代码分析
2020/02/20 jQuery
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
python中实现定制类的特殊方法总结
2014/09/28 Python
PyQt5 窗口切换与自定义对话框的实例
2019/06/20 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
毕业研究生的自我鉴定
2013/11/30 职场文书
金融行业务员的自我评价
2013/12/13 职场文书
员工趣味活动方案
2014/08/27 职场文书
给老婆的保证书
2015/01/16 职场文书
抢劫罪辩护词
2015/05/21 职场文书
法制教育讲座心得体会
2016/01/14 职场文书
PyQt5 显示超清高分辨率图片的方法
2021/04/11 Python
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js
Linux、ubuntu系统下查看显卡型号、显卡信息详解
2022/04/07 Servers