在使用react-router-dom时，我们经常会遇到路由切换时滚动到浏览器顶部的问题。

滚动到顶部 Scroll to top

很多时候我们需要的是滚动到顶部“Scroll to top”，因为我们有一个长的页面。

 我们可以使用使用一个<ScrollToTop>组件来帮助我们每次导航到一个页面的时候，滚动到顶部。确保使用 withRouter包裹它，以传递route的属性props

class ScrollToTop extends Component {
  componentDidUpdate(prevProps) {
    if (this.props.location.pathname !== prevProps.location.pathname) {
      window.scrollTo(0, 0);
    }
  }

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

export default withRouter(ScrollToTop);

在你的app之前，Router之后渲染它

function App() {
  return (
    <Router>
      <ScrollToTop>
        <App />
      </ScrollToTop>
    </Router>
  );
}

// or just render it bare anywhere you want, but just one :)
<ScrollToTop />;

如果你有个tab页签链接到router，那么你可能不想在切换页面的时候，滚动到顶部，你可以试试<ScrollToTopOnMount> 组件，放到任何你需要的地方

class ScrollToTopOnMount extends Component {
  componentDidMount() {
    window.scrollTo(0, 0);
  }

  render() {
    return null;
  }
}

class LongContent extends Component {
  render() {
    <div>
      <ScrollToTopOnMount />
      <h1>Here is my long content page</h1>
    </div>;
  }
}

// somewhere else
<Route path="/long-content" component={LongContent} />;

通用解

对于一个通用解，我们讨论两件事情：

1. 当导航到一个新页面的时候，滚动到顶部，所以你不能开启一个新页面滚动到底部

2. 存储滚动条位置，当路由切换时滚动到原来存储的位置

<Router>
  <ScrollRestoration>
    <div>
      <h1>App</h1>

      <RestoredScroll id="bunny">
        <div style={{ height: "200px", overflow: "auto" }}>I will overflow</div>
      </RestoredScroll>
    </div>
  </ScrollRestoration>
</Router>

首先，在导航到新页面时，ScrollRestoration 将滚动到浏览器顶部。然后，将会使用location.key存储window的scroll位置和RestoredScroll组件的scroll位置，存储在sessionStorage中。接着，ScrollRestoration 或者 RestoredScroll组件mount，他们将会从sessionStorage中查询他们的位置。