详解关于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 相关文章推荐
RGB颜色值转HTML十六进制(HEX)代码的JS函数
Apr 25 Javascript
jquery 多级下拉菜单核心代码
May 21 Javascript
JS重要知识点小结
Nov 06 Javascript
javascript插入样式实现代码
Feb 22 Javascript
jQuery数据缓存功能的实现思路及简单模拟
May 27 Javascript
javascript实现的DES加密示例
Oct 30 Javascript
jquery实现树形二级菜单实例代码
Nov 20 Javascript
浅析JS中document对象的一些重要属性
Mar 06 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
vue模式history下在iis中配置流程
Apr 17 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 Javascript
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
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解答方法
2012/02/04 PHP
如何让CI框架支持service层
2014/10/29 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
javascript面向对象包装类Class封装类库剖析
2013/01/24 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
JavaScript实现简单获取当前网页网址的方法
2015/11/09 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
初识简单却不失优雅的Vue.js
2016/09/12 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
简单实现js轮播图效果
2017/07/14 Javascript
详解vue-router 路由元信息
2017/09/13 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
2019/04/28 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
浅谈Python的垃圾回收机制
2016/12/17 Python
Python实现文件内容批量追加的方法示例
2017/08/29 Python
Python深度优先算法生成迷宫
2018/01/22 Python
python3.x上post发送json数据
2018/03/04 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
python入门之基础语法学习笔记
2020/02/08 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
毕业生求职信范文
2014/06/29 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书
为什么中国式养孩子很累?
2019/08/07 职场文书
Pytorch 如何实现LSTM时间序列预测
2021/05/17 Python
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS
Nginx配置根据url参数重定向
2022/04/11 Servers