페이지 이동 시 항상 맨 위로 스크롤 이동하기

페이지 이동 시 항상 맨 위로 스크롤 이동하기

페이지 이동 시 이전 페이지의 스크롤 값이 변하지 않아 다음 페이지에도 스크롤이 내려가있는 문제를 해결했습니다.

컴포넌트 준비

다음 페이지 컴포넌트

import React, { useEffect } from "react";
1️⃣import { useLocation } from "react-router";
import Details from "../components/Details";

const DetailPage = ({ match }) => {
  const storeId = match.params.storeId;

  const { pathname } = useLocation();

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

  return <Details storeId={storeId} />;
};

export default DetailPage;

1. react-router의 useLocation hook
useLocation hook을 사용하면 location 객체에 접근할 수 있습니다.
2. pathname과 window 객체
   location의 pathname을 이용해 페이지 이동이 감지가 되면 window객체의 scrollTo 속성을 (0,0)으로 설정해 페이지를 맨 위로 이동시킵니다.