详解关于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的数字改变的动画效果--可用来做计数器
Aug 11 Javascript
jquery+html5制作超酷的圆盘时钟表
Apr 14 Javascript
js游戏人物上下左右跑步效果代码分享
Aug 28 Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 Javascript
JavaScript实现二分查找实例代码
Feb 22 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 Javascript
Vue前后端不同端口的实现方法
Sep 19 Javascript
jQuery 筛选器简单操作示例
Oct 02 jQuery
JavaScript的变量声明与声明提前用法实例分析
Nov 26 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
第一节--面向对象编程
2006/11/16 PHP
PHP校验ISBN码的函数代码
2011/01/17 PHP
PHP源码之explode使用说明
2011/08/05 PHP
PHP中Array相关函数简介
2016/07/03 PHP
JavaScript中令你抓狂的魔术变量
2006/11/30 Javascript
JavaScript 原型链学习总结
2010/10/29 Javascript
js里的prototype使用示例
2010/11/19 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
2011/09/22 Javascript
js验证模型自我实现的具体方法
2013/06/21 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
跟混乱的页面弹窗说再见
2019/04/11 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
Node 模块原理与用法详解
2020/05/13 Javascript
JS实现canvas简单小画板功能
2020/06/23 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
安装python时MySQLdb报错的问题描述及解决方法
2018/03/20 Python
PyTorch学习笔记之回归实战
2018/05/28 Python
python 字典 按key值大小 倒序取值的实例
2018/07/06 Python
python+numpy实现的基本矩阵操作示例
2019/07/19 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
沃尔玛旗下墨西哥超市:Bodega Aurrera
2020/11/13 全球购物
为数据库创建索引都需要注意些什么
2012/07/17 面试题
制作部班长职位说明书
2014/02/26 职场文书
施工安全责任书
2014/04/14 职场文书
新闻报道策划方案
2014/06/11 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
先进个人主要事迹范文
2015/11/04 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
Golang: 内建容器的用法
2021/05/05 Golang