详解关于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 学习6 操纵元素显示效果的函数
Feb 07 Javascript
使用jquery自定义鼠标样式满足个性需求
Nov 05 Javascript
node.js适合游戏后台开发吗?
Sep 03 Javascript
javascript面向对象程序设计(一)
Jan 29 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
Dec 24 Javascript
JavaScript获取当前url根目录(路径)
Jun 17 Javascript
浅谈JS验证表单文本域输入空格的问题
Feb 14 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
对VUE中的对象添加属性
Sep 18 Javascript
vue地址栏直接输入路由无效问题的解决
Nov 15 Javascript
Vue触发式全局组件构建的方法
Nov 28 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 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
mysql 中InnoDB和MyISAM的区别分析小结
2008/04/15 PHP
PHP 木马攻击防御技巧
2009/06/13 PHP
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
Yii2框架制作RESTful风格的API快速入门教程
2016/11/08 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
js用图作提交按钮或超连接
2008/03/26 Javascript
JS操作Cookies包括(读取添加与删除)
2012/12/26 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
Angular实现form自动布局
2016/01/28 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
基于jquery实现弹幕效果
2016/09/29 Javascript
Vue.js实现无限加载与分页功能开发
2016/11/03 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
[00:09]DOTA2新版本PA至宝特效动作展示
2014/11/19 DOTA
python程序快速缩进多行代码方法总结
2019/06/23 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
python读取配置文件方式(ini、yaml、xml)
2020/04/09 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
小班幼儿评语大全
2014/04/30 职场文书
无私奉献演讲稿
2014/09/04 职场文书
关于童年的读书笔记
2015/06/26 职场文书
公司员工离职感言
2015/08/03 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书
科级干部培训心得体会
2016/01/06 职场文书
swagger如何返回map字段注释
2021/07/03 Java/Android
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS