もう迷わない！React Routerで全ての遷移で最上部にスクロールする完璧ガイド

React Routerで全ての遷移で最上部にスクロールする方法

問題

解決方法

React Routerには、以下の3つの方法で遷移時に最上部にスクロールする機能が提供されています。

window.scrollToを使う

最も簡単な方法です。各コンポーネントのuseEffectフック内で、以下のコードを実行します。

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

useScrollRestorationフックを使う

React Router v6.4.0以降で利用可能なフックです。以下のコードのように、useScrollRestorationフックを呼び出し、scrollToTopオプションをtrueに設定します。

import { useScrollRestoration } from 'react-router-dom';

const App = () => {
  const { scrollRestoration } = useScrollRestoration();

  useEffect(() => {
    scrollRestoration({
      scrollToTop: true,
    });
  }, []);

  return (
    <div>
      ...
    </div>
  );
};

React Router v6.4.0以降で利用可能なコンポーネントです。以下のコードのように、ScrollRestorationコンポーネントをルートコンポーネントでラップします。

import { BrowserRouter, ScrollRestoration } from 'react-router-dom';

const App = () => {
  return (
    <BrowserRouter>
      <ScrollRestoration />
      ...
    </BrowserRouter>
  );
};

各方法の比較

上記の3つの方法から、プロジェクトの要件に合った方法を選択してください。

window.scrollToを使う

import React, { useEffect } from 'react';

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

  return (
    <div>
      ...
    </div>
  );
};

export default App;

useScrollRestorationフックを使う

import React, { useEffect } from 'react';
import { useScrollRestoration } from 'react-router-dom';

const App = () => {
  const { scrollRestoration } = useScrollRestoration();

  useEffect(() => {
    scrollRestoration({
      scrollToTop: true,
    });
  }, []);

  return (
    <div>
      ...
    </div>
  );
};

export default App;

ScrollRestorationコンポーネントを使う

import React from 'react';
import { BrowserRouter, ScrollRestoration } from 'react-router-dom';

const App = () => {
  return (
    <BrowserRouter>
      <ScrollRestoration />
      ...
    </BrowserRouter>
  );
};

export default App;

react-scroll-to-topライブラリは、遷移時に最上部にスクロールする機能を提供するライブラリです。以下のコードのように、useScrollToTopフックを呼び出すことで、簡単に最上部にスクロールすることができます。

import { useScrollToTop } from 'react-scroll-to-top';

const App = () => {
  const { scrollToTop } = useScrollToTop();

  useEffect(() => {
    scrollToTop();
  }, []);

  return (
    <div>
      ...
    </div>
  );
};

export default App;

history.listenは、ブラウザの履歴変更を監視する関数です。以下のコードのように、history.listenを使って遷移を検知し、最上部にスクロールすることができます。

import { useEffect, useRef } from 'react';
import { useLocation } from 'react-router-dom';

const App = () => {
  const location = useLocation();
  const prevLocation = useRef(location);

  useEffect(() => {
    if (prevLocation.current.pathname !== location.pathname) {
      window.scrollTo(0, 0);
    }

    prevLocation.current = location;
  }, [location]);

  return (
    <div>
      ...
    </div>
  );
};

export default App;

カスタムフックを使う

上記の方法を組み合わせたり、独自ロジックを追加したりして、カスタムフックを作成することもできます。