详解关于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 相关文章推荐
Ext中下拉列表ComboBox组件store数据格式用法介绍
Jul 15 Javascript
使用jQuery和PHP实现类似360功能开关效果
Feb 12 Javascript
javascript正则表达式中分组详解
Jul 17 Javascript
JavaScript模仿Pinterest实现图片预加载功能
Oct 25 Javascript
JS中with的替代方法与String中的正则方法详解
Dec 23 Javascript
手机端转换rem适应
Apr 01 Javascript
详解Angular2 关于*ngFor 嵌套循环
May 22 Javascript
详解JavaScript的变量
Apr 04 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
May 10 Javascript
vue登录页面cookie的使用及页面跳转代码
Jul 10 Javascript
解决layui数据表格Date日期格式的回显Object的问题
Sep 19 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 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/10/09 PHP
PHP MSSQL 分页实例
2016/04/13 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
Convert Seconds To Hours
2007/06/16 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
js形成页面的一种遮罩效果实例代码
2014/01/04 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
js实现Select列表各项上移和下移的方法
2015/08/14 Javascript
简介AngularJS中$http服务的用法
2016/02/06 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
深入理解vue-loader如何使用
2017/06/06 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
微信小程序显示下拉列表功能【附源码下载】
2017/12/12 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
2019/12/12 Javascript
node+multer实现图片上传的示例代码
2020/02/18 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
python基础教程之lambda表达式使用方法
2014/02/12 Python
Python中的面向对象编程详解(上)
2015/04/13 Python
Python实现合并字典的方法
2015/07/07 Python
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
Python解析命令行读取参数--argparse模块使用方法
2018/01/23 Python
pygame实现俄罗斯方块游戏
2018/06/26 Python
Python调用C语言的实现
2019/07/26 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
世界领先的高品质定制产品平台:Zazzle
2017/07/23 全球购物
Etam俄罗斯:法国女士内衣和家居服网上商店
2019/10/30 全球购物
大学生毕业个人总结
2015/02/15 职场文书
起诉书格式范文
2015/05/20 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
教你部署vue项目到docker
2022/04/05 Vue.js
关于MySQL中explain工具的使用
2023/05/08 MySQL