详解关于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 相关文章推荐
在IE中调用javascript打开Excel的代码(downmoon原作)
Apr 02 Javascript
JQuery与JSon实现的无刷新分页代码
Sep 13 Javascript
js实现按钮加背景图片常用方法
Nov 01 Javascript
JavaScript开发人员的10个关键习惯小结
Dec 05 Javascript
javascript实现避免页面按钮重复提交
Jan 08 Javascript
jQuery+css实现的换页标签栏效果
Jan 27 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
Dec 14 Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 Javascript
angularjs实现table增加tr的方法
Feb 27 Javascript
详解小程序输入框闪烁及重影BUG解决方案
Aug 31 Javascript
微信小程序websocket实现即时聊天功能
May 21 Javascript
js实现简易计算器功能
Oct 18 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人民币金额转大写实例代码
2015/10/02 PHP
IE6,IE7下js动态加载图片不显示错误
2010/07/17 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
AngularJS基础 ng-mouseleave 指令详解
2016/08/02 Javascript
JS简单验证上传文件类型的方法
2017/04/17 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
2017/06/23 Javascript
json2.js 入门教程之使用方法与实例分析
2017/09/14 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
十条建议帮你提高Python编程效率
2016/02/16 Python
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
python 实现查找文件并输出满足某一条件的数据项方法
2019/06/12 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
PIL图像处理模块paste方法简单使用详解
2019/07/17 Python
python使用minimax算法实现五子棋
2019/07/29 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
CSS3 Backgrounds属性相关介绍
2011/05/11 HTML / CSS
CSS3 文字动画效果
2020/11/12 HTML / CSS
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
网络工程师的自我评价
2013/10/02 职场文书
毕业生怎样写好自荐信
2013/11/11 职场文书
初入社会应届生求职信
2013/11/18 职场文书
社区活动邀请函范文
2014/01/29 职场文书
总经理司机岗位职责
2014/02/06 职场文书
员工生日会策划方案
2014/06/14 职场文书
2015年安全工作总结范文
2015/04/02 职场文书
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL