Frontend プログラミング

React Routerでページ遷移するときに常に最上部から表示するようにする

React Routerでページ遷移を行うと、前画面でスクロールしていた位置が残ってしまいます。

そこでwindow.scrollTo(0, 0)を利用して、ページ遷移後にページ最上部にくるようにします。

※ React Hooksを使用するので、Reactのバージョンが16.8以上でないと使えません。

やり方

React Hooksの機能である、useEffectとuseLocationを利用して、パスが変更した時のみ、スクロールトップが実行されるようにします。

コード

import { useEffect } from "react"
import { useLocation } from "react-router-dom"

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

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

  return null
}

この作成したコンポーネントをRouterでラップします。

コード

<Router>
  <ScrollToTop />
    <Switch>
      <Route exact path="/" component={PageTop} />
      <Route path="/about" component={PageAbout} />
    </Switch>
</Router>

-Frontend, プログラミング
-,

© 2024 XtImmune