React切换路由，没有回到顶部

在网上找了很久，也都是利用window.scrollTo 方法去解决的，但我尝试后，发现没有生效。问了其他大佬之后，才发现问题出在 scrollTo 方法的调用上

class ScrollToTop extends Component {
     componentWillReceiveProps(nextProps) {
          // 当路由切换时
          if (this.props.location !== nextProps.location) {
               const layoutContentNode = document.querySelector('.layout-content')  
               // 重点在这里， 需要是在 产生 scroll 的父元素 上进行 scrollTo，而不能在window上，因为在项目中，window不是产生滑动的父元素
              layoutContentNode && layoutContentNode.scrollTo(0, 0)
         }
      }

     render() {
         return this.props.children
     }
}

关键点就在于，应该使用产生 scroll 的父元素

如何使用：

<Router>
    <ScrollToTop>
      // 在Switch 外层包裹这个 ScrollToTop 组件，就可以正常使用了。
        <Switch>
            <Routepath='/'component={router}/>
            <Redirectfrom='*'to='/'/>
         </Switch>
    </ScrollToTop>
</Router>

React切换路由，没有回到顶部

悦读