[react] path 수정 시 스크롤 상단으로 이동하는 컴포넌트

 

1. 아래와 같이 경로가 바뀌면 스크롤이 최상단으로 이동하는 컴포넌트를 생성한다.

// ScrollToTop.tsx

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

export default function ScrollToTop() {
    const { pathname } = useLocation();
    useEffect(() => {
        window.scrollTo({top: 0, left: 0, behavior: 'smooth' });
    }, [pathname]);

    return null;
}

 

 

2. 최상위 컴포넌트에 해당 컴포넌트를 삽입한다.

// App.tsx

export const App = (): JSX.Element => {
  return (
    <>
      <Nav />
      <ScrollToTop />
      <Routes>
        <Route path="/" element={<MainPage />} />
        <Route path="/login" element={<Login />} />
        ...
      </Routes>
      <Footer />
    </>
  );
};