Scroll to Top when navigate to a new route in React using react-router v6.12

Question

I'm having a problem when I'm going to another route, the scroll position stays on the same position as previous route.

I'm using React with Vite and react-router v6.12 (latest version).

What i've tried: I've created a component that handles the scrollToTop and I have imported and used in my App.jsx before the <Outlet /> but it seems that it doesn't scroll to the top of the page (btw: the console.log message is printed).

When I've searched for this issues, many people solved their issue with below function, but for me it doesn't work.

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

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

    useEffect(() => {
        // first way..not working
        window.scrollTo(0, 0);

        // second way..still not working
        document.documentElement.scrollTo({
            top: 0,
            left: 0,
            behavior: "instant",
        });

        console.log("Called");
    }, [pathname]);

    return null;
};

export default ScrollToTop;

My files are structured in this way:

main.jsx

import React from "react";
import ReactDOM from "react-dom/client";

import { RouterProvider } from "react-router-dom";
import router from "./router";

import "./App.css";

ReactDOM.createRoot(document.getElementById("root")).render(
    <React.StrictMode>
        <RouterProvider router={router} />
    </React.StrictMode>
);

router.js

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

import App from "./views/layouts/App.jsx";

import HomePage from "./views/HomePage.jsx";
import Items from "./views/Items.jsx";
import About from "./views/About.jsx";
import Contact from "./views/Contact.jsx";

const router = createBrowserRouter([
    {
        path: "/",
        element: <App />,
        children: [
            {
                path: "/",
                element: <HomePage />,
            },
            {
                path: "/items",
                element: <Items />,
            },
            {
                path: "/about",
                element: <About />,
            },
            {
                path: "/contact",
                element: <Contact />,
            },
        ],
    },
]);

export default router;

App.jsx

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

import ScrollToTop from "../../utilities/ScrollToTop";

import Navbar from "../../components/Navbar";
import Footer from "../../components/Footer";

function App() {
    return (
        <>
            <ScrollToTop />
            <Navbar />
            <div className="content">
                <Outlet />
            </div>
            <Footer />
        </>
    );
}

export default App;

Bassically want I want to achive is this:

• When user navigate to a new page (cliks a < Link >) it must go to that page with scroll position to the top
• When pressing Back button (from browser Not clicking another < Link > that goes to previous page) must go to the previous page on the same scroll position (if it is possible)

Can someone help me? Thank you in advance!

Answer 1

Copy/Paste the code where you export the scrollToTop component file:

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

Now in App.js file

function App(){
<>
<ScrollToTop />
<Routes>
<Route />
.
.
.
</Routes>
<>
}

export default App;