0

I am using the following ScrollToTop component to scroll to the top of the page after navigating to a new page with react-router (copied from somewhere here at SO). This works as intended.

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

<ScrollToTop /> is located within my App.js right below my react-helmet and above my <Header /> component.

However, when navigating to the current page (e.g. I open website/about, scroll down and navigate to website/about again), then I stay at the current position without scrolling back to the top. I am assuming this is the case because the component doesn't get reloaded?

What I would expect/like to happen is that the page scrolls to the top on every navigation, even when navigating to the current page.

How can I achieve this?

loocd
  • 71
  • 8

1 Answers1

1

Allright - after looking around and fiddling some more, I stumbled upon this right here: stackoverflow: react-router scroll to top on every transition

I discarded this at first because I assumed it would do pretty much the same thing as my code. Boy was I wrong. This code does exactly what I was looking for.

Only one thing: I was getting an error about a missing dependency:

React Hook useEffect has a missing dependency: 'history'.

Adding history to the dependencies fixed this issue. Here the final code, mostly copied from the post linked above:

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

function ScrollToTop({ history }) {
    useEffect(() => {
        const unlisten = history.listen(() => {
            window.scrollTo(0, 0);
        });
        return () => {
            unlisten();
        };
    }, [history]);

    return null;
}

export default withRouter(ScrollToTop);
loocd
  • 71
  • 8