React 路由跳转后回到页面顶部

Oct 11, 2016

在 React 组件间进行页面跳转后，发现页面的位置并不在页面顶部，而是在页面跳转前的位置，就是说浏览器的滚动条并没有回到顶部的位置。

经过搜索之后找到了解决方案：Scroll to the top of the page after render in react.js

可以使用下面这种解决，但是这种方式不是一种很好的解决方法。而且 scrollIntoView() 方法并不回到页面的顶部，应该使用 scrollTop = 0 的方式。

componentDidUpdate = () => {
  ReactDom.findDOMNode(this).scrollIntoView();
};

所以得到的解决方案是：

componentDidUpdate() {
  ReactDOM.findDOMNode(this).scrollTop = 0
}

但是我使用这个之后，ESlint 报了个错：no-find-dom-node。查看 eslint-plugin-react 的文档可以看到 Facebook 不推荐使用 findDOMNode，推荐使用 refs 获取 DOM 节点。

所以推荐的使用方法是：

class MyComponent extends Component {
  componentDidMount() {
    this.node.scrollIntoView();
  }
  render() {
    return <div ref={(node) => (this.node = node)} />;
  }
}