详解关于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 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
Sep 25 Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 Javascript
html5 canvas 详细使用教程
Jan 20 Javascript
jQuery实现标签页效果实战(4)
Feb 08 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
Mar 15 Javascript
AjaxUpLoad.js实现文件上传
Mar 05 Javascript
vue-router重定向不刷新问题的解决
Jun 25 Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
Jan 09 Javascript
vue的for循环使用方法
Feb 12 Javascript
微信小程序 如何获取网络状态
Jul 26 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
laravel 5异常错误:FatalErrorException in Handler.php line 38的解决
2017/10/12 PHP
PHP MVC框架中类的自动加载机制实例分析
2019/09/18 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
JavaScript-世界上误解最深的语言分析
2007/08/12 Javascript
jQuery 定时局部刷新(setInterval)
2010/11/19 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
js闭包实例汇总
2014/11/09 Javascript
使用jquery动态加载js文件的方法
2014/12/24 Javascript
为什么JS中eval处理JSON数据要加括号
2015/04/13 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
Javascript使用function创建类的两种方法(推荐)
2016/11/19 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
Python查询IP地址归属完整代码
2017/06/21 Python
python最长回文串算法
2018/06/04 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
巴西电子产品购物网站:Saldão da Informática
2018/01/09 全球购物
信用社实习人员自我鉴定
2013/09/20 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
最感人的道歉情书
2015/05/12 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
详细了解java监听器和过滤器
2021/07/09 Java/Android
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android