How to show the page from the beginning when switching between pages?

Question

React

Hello! There is a small site on Strapi and React. The menu is fixed at the top. I noticed a small bug: if, for example, I scroll down one page to the very footer and then follow the link in the menu to go to another page, then the footer is also shown first on the new page. Accordingly, if the header was opened and the link was followed, then the header is also shown on the new page first, that is, the relative position on the page is remembered. Tell me, pliz, how to remove this behavior and always show it from the top when switching to a new page?

For navigation I use Route and Switch from react-router-home.

Answer 1

https://reactrouter.com/web/guides/scroll-restoration

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;
}