【React】React-Routerで別パスに行った時に上にスクロールしてくれない時

React Routerを使っていて、/aboutなどの別のパスに行った時(そのコンポーネントが表示された時)、前のページでスクロールした分だけ勝手にスクロールされた状態で表示されることがあります。

見た方がわかりやすいかと思うので、gifを準備しました。
こんな感じの挙動です

なんか嫌ですよね。。。

そこで公式ドキュメントにある方法ですが、別ページに行った時(そのパスのコンポーネントがmountされた時)に一番上までスクロールされた状態で表示されるようにしました。

その時の備忘録メモです。

ScrollToTopコンポーネントを作る

ScrollToTop.jsを作成し以下を記述します。

import React, { Component } from 'react';
import { withRouter } from 'react-router'

class ScrollToTop extends Component {
　　　//コンポーネントがmountされた時に発動
  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      window.scrollTo(0, 0) //一番上まで
    }
  }

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

export default withRouter(ScrollToTop)

詳しくは公式ドキュメントに載っているので参考にして見てください(英語)

Routerが使われているjsファイルを開き、上で作成したコンポーネントをimportします。

ほんで<ScrollToTop></ScrollToTop>で全てを囲むだけでおっけー^ ^
＊Router内の一番外

これで以下のように別のパスのコンポーネントが表示された時にページの一番上までスクロールされるようになりました〜〜〜わ〜い

以上です〜〜〜

React Routerのドキュメントは充実しているので何かあればまずドキュメントをチェックしてみるといいかもですね

では〜〜〜