详解关于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 相关文章推荐
js 禁用只读文本框获得焦点时的退格键
Apr 25 Javascript
style、 currentStyle、 runtimeStyle区别分析
Aug 01 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
js面向对象编程之如何实现方法重载
Jul 02 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 Javascript
javascript中cookie对象用法实例分析
Jan 30 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
May 11 Javascript
Vue2.x中的Render函数详解
May 30 Javascript
详解Vue双向数据绑定原理解析
Sep 11 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
Feb 10 Javascript
Node.js fs模块原理及常见用途
Oct 22 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
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
Smarty分页实现方法完整实例
2016/05/11 PHP
php面向对象重点知识分享
2019/09/27 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
javascript prototype,executing,context,closure
2008/12/24 Javascript
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
js动态设置鼠标事件示例代码
2013/10/30 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
2014/04/04 Javascript
JS数字抽奖游戏实现方法
2015/05/04 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
JS使用onerror捕获异常示例
2016/08/03 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
js中let能否完全替代IIFE
2019/06/15 Javascript
layui按条件隐藏表格列的实例
2019/09/19 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
vue实现数字滚动效果
2020/06/29 Javascript
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
使用pandas中的DataFrame数据绘制柱状图的方法
2018/04/10 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
python实现加密的方式总结
2020/01/19 Python
Python定时从Mysql提取数据存入Redis的实现
2020/05/03 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
python文件路径操作方法总结
2020/12/21 Python
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
网络工程专业自荐信范文
2014/03/16 职场文书
投标担保书范文
2014/04/02 职场文书
捐款倡议书格式范文
2014/05/14 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书