【React】遷移先でページ上部から表示する方法

背景

現在Reactを使って開発中なのですが、ページをいくらかスクロールしてから他ページに遷移すると、画面の最上部から表示されないという使いづらさがありました。

chatGPT先生に聞いて解決したので共有します。

解決

まずは画面上部に戻る機能を作って、

ScrollToTop.jsx

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

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

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

  return null;
}

export default ScrollToTop;

あとはこれを適用したいページにあてれば良いのですが、各ページにimportするのがめんどうだったので、レイアウトのファイルにあててしまいました。

MainLayout.jsx

import React from 'react';
import { Outlet } from 'react-router-dom';
import Header from '../components/Header';
import Footer from '../components/Footer';
import ScrollToTop from './ScrollToTop';

const MainLayoute = () => {
  return (
    <>
      <Header />
      <ScrollToTop />
      <main>
        <Outlet />
      </main>
      <Footer />
    </>
  )
}
export default MainLayoute

ただ、ブラウザバックしたときはスクロール量は前のままじゃないと戻った感がないので、以下のようにして画面遷移とリロードしたときのみ動作するようにしました。

ScrollToTop.jsx

import { useEffect } from "react";
import { useLocation, useNavigationType } from "react-router-dom";

function ScrollToTop() {
  const { pathname } = useLocation();
  const navigationType = useNavigationType();

  useEffect(() => {
    if (navigationType === "PUSH" || navigationType === "REPLACE") {
      window.scrollTo(0, 0);
    }
  }, [pathname, navigationType]);

  return null;
}

export default ScrollToTop;

自分の作りたいものがだんだんできていくのが楽しいです。