React | 페이지 이동 시 화면의 최상단으로 위치시키기

프로젝트를 진행하며 화면 이동시 최상단이 아닌 이전페이지의 스크롤위치와 동일한 위치로 이동되는 이슈가 발생하였다.

간단한 컴포넌트를 생성하여 해결 할 수 있었다.

/ScrollTop.js
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;
}

/Router.js
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import MainPage from 'pages/MainPage';
import ScrollToTop from 'components/ScrollTop';

const Router = () => {
  return (
    <BrowserRouter>
      <ScrollToTop />
      <Routes>
        <Route path="/" element={<MainPage />} />

      </Routes>
    </BrowserRouter>
  );
};

export default Router;