详解关于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 相关文章推荐
jQuery 解析xml文件
Aug 09 Javascript
一个可以兼容IE FF的加为首页与加入收藏实现代码
Nov 02 Javascript
得到jQuery detach()后节点中的某个值实现代码
Feb 05 Javascript
setTimeout和setInterval的深入理解
Nov 08 Javascript
ExtJs纵坐标值重复问题的解决方法
Feb 27 Javascript
freemarker判断对象是否为空的方法
Aug 13 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 Javascript
angularjs实现过滤并替换关键字小功能
Sep 19 Javascript
js for终止循环 跳出多层循环
Oct 04 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
Jun 18 Javascript
electron-vue开发环境内存泄漏问题汇总
Oct 10 Javascript
使用Canvas绘制一个游戏人物属性图
Mar 25 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 VS ASP
2006/10/09 PHP
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
2016/05/28 PHP
Javascript WebSocket使用实例介绍(简明入门教程)
2014/04/16 Javascript
JavaScript实现页面跳转的几种常用方式
2015/11/28 Javascript
jQuery表格插件datatables用法汇总
2016/03/29 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
vue router仿天猫底部导航栏功能
2017/10/18 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
JavaScript对象拷贝与赋值操作实例分析
2018/12/10 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
Vue 打包的静态文件不能直接运行的原因及解决办法
2020/11/19 Vue.js
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
Python实现批量转换文件编码的方法
2015/07/28 Python
python语言使用技巧分享
2016/05/31 Python
Python实现批量检测HTTP服务的状态
2016/10/27 Python
Python 变量类型详解
2018/10/10 Python
python样条插值的实现代码
2018/12/17 Python
python 为什么说eval要慎用
2019/03/26 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
python文件读写代码实例
2019/10/21 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
Python接口开发实现步骤详解
2020/04/26 Python
python中关于数据类型的学习笔记
2020/07/19 Python
详解python安装matplotlib库三种失败情况
2020/07/28 Python
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
正风肃纪剖析材料
2014/02/18 职场文书
公开服务承诺制度
2014/03/26 职场文书
《路旁的橡树》教学反思
2014/04/07 职场文书
感恩寄语大全
2014/04/11 职场文书
综合实践活动总结
2014/05/05 职场文书
学习经验演讲稿
2014/05/10 职场文书
品酒会策划方案
2014/05/26 职场文书
委托书范本格式
2019/04/18 职场文书