Reactで遷移先のページ位置を一番上にする

問題

Reactでリンク先に遷移した時に、ページの途中や最後の位置を表示してしまう。

原因

Reactは、リンク経由でページ遷移をしても画面を書き換えるだけで、ページのスクロールポジションまでは初期化してくれないらしい。

解決策

マウント後に window.scrollTo(0, 0) を実行できるようにする。

一番簡単なのは useEffect を使う事ではないだろうか。
componentDidMount でも良いが、今回はモダンな useEffect で実装する。

index.js

import React, { useEffect } from 'react'

export default function Sample() {

  useEffect(() => {
      window.scrollTo(0, 0)
  }, []);

  return (
    // return something...
  )
}