React TS: scroll to top on every page navigation

1
2
3
4
5
6
7
8
9
10
11
12
13
14import { 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;

1
2
3
4
5
6
7
8
9
10
11
12
13import 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>
);