详解关于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 相关文章推荐
javascritp实现input输入框相关限制用法
Jun 29 Javascript
javascript入门·对象属性方法大总结
Oct 01 Javascript
javascript复制对象使用说明
Jun 28 Javascript
extjs3 combobox取value和text案例详解
Feb 06 Javascript
jquery实现table鼠标经过变色代码
Sep 25 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 25 Javascript
JavaScript 基本概念
Jan 20 Javascript
js获取内联样式的方法
Jan 27 Javascript
JavaScript原生实现观察者模式的示例
Dec 15 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 Javascript
angular将html代码输出为内容的实例
Sep 30 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查看当前Session的ID实例
2015/03/16 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
JavaScript在IE和FF下的兼容性问题
2014/05/19 Javascript
JS清除选择内容的方法
2015/01/29 Javascript
jquery操作select方法汇总
2015/02/05 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
2017/05/12 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
python调用matlab的m自定义函数方法
2019/02/18 Python
Python中捕获键盘的方式详解
2019/03/28 Python
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
pytorch:torch.mm()和torch.matmul()的使用
2019/12/27 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
python邮件中附加文字、html、图片、附件实现方法
2021/01/04 Python
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
物业招聘计划书
2014/01/10 职场文书
大学军训通讯稿
2014/01/13 职场文书
保护环境倡议书300字
2014/05/19 职场文书
个人欠款担保书
2014/05/20 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
2014年班主任德育工作总结
2014/12/05 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
公安干警正风肃纪心得体会
2016/01/15 职场文书
高效课堂教学反思
2016/02/24 职场文书
MySQL数据库超时设置配置的方法实例
2021/10/15 MySQL
SQL Server中的逻辑函数介绍
2022/05/25 SQL Server
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers