关于React-Router4.0跳转不置顶解决方案

栏目: 服务器 · 发布时间: 7年前

内容简介:在使用react-router时会遇到奇怪的问题,比如当我们从首页进入详情页的时候,首页跳转到详情页,首页滚动的位置,进入到详情页的时候也会被记录下来,原因是由于共享了同一个history,所以对记录有所保留,这显然不符合我们的浏览习惯。总结种解决方案:方案一

在使用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>
    );
}

}


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

计算机系统概论

计算机系统概论

派特(Patt.Y.N.) / 梁阿磊、蒋兴昌、林凌 / 机械工业 / 2008-1-1 / 49.00元

《计算机系统概论(原书第2版)》是计算机科学的经典基础教材。全书以自底向上方法帮助学生理解计算机系统的原理,前半部分阐述了计算机底层结构,后半部分讲解了高级语言编程及编程方法学,主要内容包括数据类型及其运算、数字逻辑、冯·诺伊曼模型、汇编语言、输入和输出、TRAP程序和子程序、C语言编程等内容。 《计算机系统概论(原书第2版)》可用作高等院校计算机及相关专业学生的入门教材,也可作为的计算机专......一起来看看 《计算机系统概论》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

随机密码生成器
随机密码生成器

多种字符组合密码

URL 编码/解码
URL 编码/解码

URL 编码/解码