react-routerで画面遷移時にスクロール位置をページ最上部にする

Reactでreact-routerを使って画面遷移する際に、前のページのスクロール位置のままページが遷移されてしまう問題を解決する方法を紹介します。

なお、この記事で紹介するのはreact-router-domのバージョン6の場合です。

まず次のようなコンポーネントを作成します。

import { useEffect } from “react”;
import { useLocation } from “react-router-dom”;

function ScrollTop() {
　　const { pathname } = useLocation();

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

　　　　return null;
}

export default ScrollTop;

そして、react-routerでルーティング設定している部分で、Routerのすぐ下で先ほど作成したコンポーネントを読み込めばOKです。

function App() {
　　return (
　　　　<Router>
　　　　　　<ScrollToTop />
　　　　　　<Routes>
　　　　　　　　<Route exact path={ homeUrl } element={<Home />} />
　　　　　　　　<Route path={ homeUrl + “/about” } element={<About />} />
　　　　　　　　<Route path=”*” element={<NoMatch />} />
　　　　　　</Routes>
　　　　</Router>
　　);
}

これで、画面遷移した時でもスクロール位置がページの最上部になると思います。

Leave a Comment X