详解关于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 相关文章推荐
Jquery ui css framework
Jun 28 Javascript
动感效果的TAB选项卡jquery 插件
Jul 09 Javascript
JS显示表格内指定行html代码的方法
Mar 31 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
Nov 24 Javascript
JQuery日历插件My97DatePicker日期范围限制
Jan 20 Javascript
判断JS对象是否拥有某属性的方法推荐
May 12 Javascript
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 Javascript
JavaScript生成.xls文件的代码
Dec 22 Javascript
Express + Session 实现登录验证功能
Sep 08 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
vue中的过滤器实例代码详解
Jun 06 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 获取mysql数据库信息代码
2009/03/12 PHP
php获取当前页面完整URL地址
2015/12/30 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
Yii2-GridView 中让关联字段带搜索和排序功能示例
2017/01/21 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
PHP中register_shutdown_function函数的基础介绍与用法详解
2017/11/28 PHP
二级域名或跨域共享Cookies的实现方法
2008/08/07 Javascript
Aptana调试javascript图解教程
2009/11/30 Javascript
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
jquery动画1.加载指示器
2012/08/24 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
简单理解JavaScript中的封装与继承特性
2016/03/19 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
javascript 中的console.log和弹出窗口alert
2016/08/30 Javascript
总结几道关于Node.js的面试问题
2017/01/11 Javascript
javascript  删除select中的所有option的实例
2017/09/17 Javascript
vue中v-for循环给标签属性赋值的方法
2018/10/18 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
ES6 Symbol数据类型的应用实例分析
2019/06/26 Javascript
Vue学习之axios的使用方法实例分析
2020/01/06 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
Python爬取qq music中的音乐url及批量下载
2017/03/23 Python
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
深入理解Django-Signals信号量
2019/02/19 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
Python 基于FIR实现Hilbert滤波器求信号包络详解
2020/02/26 Python
英国儿童设计师服装的领先零售商:Base
2019/03/17 全球购物
linux面试题参考答案(8)
2016/04/19 面试题
shell的种类有哪些
2015/04/15 面试题
企业员工培训感言
2014/02/26 职场文书
校庆团日活动总结
2014/08/28 职场文书
vue3中的组件间通信
2021/03/31 Vue.js