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

Tips Web

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のドキュメントは充実しているので何かあればまずドキュメントをチェックしてみるといいかもですね

では〜〜〜

Webのコトでお困りの方

ホームページの制作・修正・リニューアル等のお手伝い致します!!詳細はこちら

まずは下のリンクから気軽にご相談ください^ ^

SNSからのDMの方が早くレスポンスできます。