详解关于React-Router4.0跳转不置顶解决方案
更新时间：2019年05月10日 11:02:54 作者：BlazeXue
这篇文章主要介绍了详解关于React-Router4.0跳转不置顶解决案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
在使用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>
);
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
相信很多小伙伴们都一直在疑惑，setState 到底是同步还是异步。本文就详细的介绍一下React中setState同步或异步问题，感兴趣的可以了解一下2021-11-11
在React中,错误边界是一种特殊的组件,用于捕获其子组件树中发生的JavaScript错误,并防止这些错误冒泡至更高层,导致整个应用崩溃,下面我们就来看看它的具体应用吧2024-03-03
今天介绍下React手写tab切换问题，代码部分包括父文件，子文件及子文件tab样式，本文通过实例代码给大家介绍的非常详细，感兴趣的朋友跟随小编一起看看吧2021-11-11
在这篇指南中,我们将探索使用 Google Fonts 在 React Native 应用中添加自定义字体的方法,字体是优秀用户体验的基石,使用定制字体可以为你的应用程序提供独特的身份,需要的朋友可以参考下2024-02-02
这篇文章主要为大家介绍了React如何实现代码分割Code Splitting示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要介绍了React与Redux之数组处理讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
这篇文章主要为大家介绍了React竞态条件Race Condition实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了在 React 中使用 i18next,本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-01-01
最近使用react做个滚动监听获取更多数据效果,当想获取dom时发现怎么也获取不到,下面这篇文章主要给大家介绍了关于React报错解决之ref返回undefined或null的相关资料,需要的朋友可以参考下2022-08-08
本文主要介绍了React中setState同步异步场景的使用，文中根据实例编码详细介绍的十分详尽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
最新评论