React 페이지 이동 후 최상단으로 이동

윈도우 상단으로 올리는 컴포넌트

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

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

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

  return null;
};

export default ScrollToTop;

useLocation : 현재 페이지의 위치 정보 제공
pathname : 페이지 위치 정보 가진 변수
useEffect(() => { ... }, [pathname]) : 페이지가 변경될 때마다 윈도우 위치를 최상단으로 올림

코드에 적용

<BrowserRouter>
        <ScrollToTop/>
        <Routes>
          <Route path='/' element={<Main />} />
          <Route path='FirstPage' element={<FirstPage/>} />
          <Route path='FirstPage1' element={<FirstPage1/>} />
          <Route path='FirstPage2' element={<FirstPage2/>} />
          <Route path='FirstPage3' element={<FirstPage3/>} />
          <Route path='FirstPage4' element={<FirstPage4/>} />
          <Route path='SecondPage' element={<SecondPage/>} />
        </Routes>
</BrowserRouter>

라우터 구조를 담당하는 컴포넌트에서 페이지 이동하면 스크롤 위치가 항상 페이지 상단에 위치하도록 Router 최상단에 적용.