【React】遷移後のページを最上部から表示する

はじめに

React Routerでページ遷移を行う際、前画面でスクロールした状態が残ってしまいます。
遷移後のページを最上部から表示させるために、window.scrollTo(0, 0)を利用します。

実装

useLocationとuseEffectを利用し、パス名が変わったときにwindow.scrollTo(0, 0)が実行されるようにします。

const ScrollToTop = () => {
  const { pathname } = useLocation()

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

  return null
}

作成したScrollToTopをRouterでラップします。
これでComponentOne ComponentTwo ComponentThreeのどこに遷移しても、ページ最上部から表示されるようになります。

    <Router>
      <ScrollToTop />
      <Switch>
        <Route path={'/one'}>
          <ComponentOne />
        </Route>
        <Route path={'/two'}>
          <ComponentTwo />
        </Route>
        <Route path={'/three'}>
          <ComponentThree />
        </Route>
    </Router>