[React] 페이지 이동시 스크롤 최상단 위치시키기

navigate를 통해 페이지 이동 후 스크롤이 아래에 똑같이 머무는 현상이 발생했다.

 

이를 해결하기 위한 코드는 다음과 같다.

ScrollToTop 컴포넌트 생성

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

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

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

  return null;
}

 

BrowserRouter안에 컴포넌트를 import 시킨다.

 

그럼 페이지 이동시 최상단으로 스크롤을 고정할 수 있다.

 

https://choijying21.tistory.com/84

[React] 페이지 이동 시 화면 최상단으로 스크롤(ScrollToTop)