React-Router4.0页面跳转后如何避免滚动条回到顶部问题？
- 内容介绍
- 文章标签
- 相关推荐
本文共计279个文字，预计阅读时间需要2分钟。
在使用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> ); } }
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。
本文共计279个文字，预计阅读时间需要2分钟。
在使用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> ); } }
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。