I'm not entirely certain about the structure of your layout, but you can enclose your app within a wrapper inside the <BrowserRouter /> tag and monitor location changes using useLayoutEffect. If there is a change, you can automatically scroll to the top. Below is a basic example.

Check out the Codesandbox here

import { BrowserRouter, Routes, Route, Link, useLocation } from 'react-router-dom'
import { useLayoutEffect } from 'react'

const Wrapper = ({children}) => {
  const location = useLocation();
  useLayoutEffect(() => {
    document.documentElement.scrollTo(0, 0);
  }, [location.pathname]);
  return children
} 

const Component = ({title}) => {
  return (
    <div>
      <p style={{paddingTop: '150vh'}}>{title}</p>
    </div>
  )
}

const App = () => {
  return (
    <BrowserRouter>
      <Wrapper>
        <p>Scroll down to see the pages change</p>

        <Routes>
          <Route path="/" element={<Component title="Home"/>} />
          <Route path="/about" element={<Component title="About"/>} />
          <Route path="/product" element={<Component title="Product"/>} />
        </Routes>

        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/product">Product</Link>
      </Wrapper>
    </BrowserRouter>
  )
}

export default App

This solution tackles the problem at hand. Check it out here ->

Create a new component called ScrollToTop

Next, include this code snippet:

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

export default function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    // Use "document.documentElement.scrollTo" for React Router Dom v6
    document.documentElement.scrollTo({
      top: 0,
      left: 0,
      behavior: "instant", // Add this line if you want to skip the scrolling animation
    });
  }, [pathname]);

  return null;
}

Don't forget to import it in your App.js file to resolve the issue.

View image

In my coding practice, I have found success using the ScrollRestoration feature. When experimenting without the ScrollRestoration component, attempting to utilize window.scrollTo(0, 0) resulted in no effect.

 import { Outlet, useLocation, ScrollRestoration } from 'react-router-dom'
    function App() {
       const { pathname } = useLocation()
       useLayoutEffect(() => {
          window.scrollTo(0, 0)
       }, [pathname])
       return (
           <div className="App">
              <TopHeader />
              <Outlet />
              <Footer />
              <ScrollRestoration />
           </div>
        )
     }

     export default App

If you want to ensure that the scroll position is reset to the top when navigating to a new page and maintained when returning to a previous page, consider using the ScrollRestoration component in your React Router version 6.4 or above project. This component works well with data routers like the one generated by calling createBrowserRouter, which is recommended for all web projects utilizing React Router.

The ScrollRestoration component ensures that the scroll position is preserved accurately after loading has finished, even across different domains.

To implement this feature, simply include the ScrollRestoration component once in the root component of your application. Here's an example using a functional component:

import { ScrollRestoration } from 'react-router-dom';
function App() {
    return <>
        <div>Some content</div>
        <ScrollRestoration/>
    </>;
}

If you're having trouble accessing this window function in newer versions of react, consider using the useRef Hook instead.

const myRef = useRef<any>(null);
const executeScroll = () => myRef.current.scrollIntoView({inline: "center"});

useEffect(() => {
    executeScroll();
  }, [location.pathname]);
  
// YOUR COMPONENTS CODE
// Make sure to set your toolbar as the ref
<Toolbar ref={myRef}/>

This setup will automatically scroll when navigating and the pathname changes.

The key is to include incorporate the component <ScrollRestoration /> within the main "root" component, as shown in the following code:

import { ScrollRestoration } from "react-router-dom";

function MainRootComponent() {
  return (
    <div>
      {/* ... */}
      <ScrollRestoration />
    </div>
  );
}

For more information, you can check out: this link

If you're using react-router-dom version 6, this is the way to achieve it:

    function ScrollToTop() {
        const { pathname } = useLocation();

        useEffect(() => {
            window.scrollTo(0, 0);
        }, [pathname]); // Make sure the effect only runs when the pathname changes

        return null;
    }

    export default function ScrollToTop() {
        return (
            <BrowserRouter>
                <ScrollToTop />
                <Routes onUpdate={() => window.scrollTo(0, 0)}>
                    <Route path="*" element={<Pagenotfound />} />
                    {/* Your other routes go here */}
                </Routes>
            </BrowserRouter>
        );
    }

function scrollPageToTop(position = 0) {
  try {
    /**
     * Using the latest API for smooth scrolling
     */
    window.scroll({
      top: position,
      left: 0,
      behavior: "smooth",
    });
  } catch (_) {
    /**
     * Fallback method for older browsers
     */
    window.scrollTo(0, position);
  }
};

You can utilize the code above to smoothly scroll to the top of the page.

const hasMounted = useHasMounted();
const router = useRouter();
const { path } = router;
useEffect(() => {
    if (hasMounted) {
      scrollPageToTop();
    }
  }, [path]);

Make sure to insert the provided code into the main parent component.

In my experience, I have found that ScrollRestoration only works properly within the Layout component and not when used inside other components like App.

import { Outlet, ScrollRestoration } from "react-router-dom";

import { Header } from "../Header/Header.jsx";
import { Footer } from "../Footer/Footer.jsx";

export const Layout = () => {
  return (
    <>
      <Header />
      <main>
        <Outlet />
      </main>
      <Footer />
      <ScrollRestoration />
    </>
  );
}; 

I am utilizing "react-router-dom" version "6.21.2"

I implemented a solution using a custom hook

// useCustomScroll.jsx
import { useEffect } from "react";
import { useLocation } from "react-router-dom";

export default function UseCustomScroll() {
  const location = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0, { behavior: "smooth" });
  }, [location]);

  return null;
}

This can be used in either App.jsx or Layout.jsx

import UseCustomScroll from '@/hooks/useCustomScroll';

const Layout = () => {
    UseCustomScroll()
    return <>
        .....
    </>
}

export default Layout