React TS 모든 페이지 이동 시 Scroll To Top

ScrollToTop.tsx 생성

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;

 

이후 main.tsx 즉 최상위 component에서 페이지 component들을 감싸게 삽입하면 완료

import ScrollToTop from './shared/ScrollToTop';
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <BrowserRouter>
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <QueryClientProvider client={queryClient}>
          <ScrollToTop />
          <App />
        </QueryClientProvider>
      </LocalizationProvider>
    </BrowserRouter>
  </React.StrictMode>
);