[React]react-router v4で画面遷移時に前のページのスクロール位置が残る

概要

react-routerを使用したプロジェクトにおいて、画面遷移時に前のページのスクロール位置が残ってしまい、ページの最上部から表示されない問題を解決したのでメモとして残しておく。

解決法

普通にreact-routerの公式ドキュメントに解決法があった。

実装

コンポーネントを作る

ScrollToTop.jsx

import { Component } from 'react';
import { withRouter } from 'react-router-dom';

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

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

export default withRouter(ScrollToTop);

インポートする

react-routerを使用しているコンポーネントにインポートする

import ScrollToTop from './components/ScrollToTop';

ラップする

<ScrollToTop>でラップします。

<Router>
  <ScrollToTop>
    <App />
  </ScrollToTop>
</Router>