How can you manage scroll behavior when navigating between routes in React Router

Question

Can i know How can you manage scroll behavior when navigating between routes in React Router?

Answer 1

By default, React Router doesn’t reset scroll position when navigating. To fix this, manually manage scroll using useEffect and useLocation.

Scroll to Top on Route Change

// ScrollToTop.jsx

import { useEffect } from "react";

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

function ScrollToTop() {

  const { pathname } = useLocation();

  useEffect(() => {

    window.scrollTo(0, 0); // Scroll to top on path change

  }, [pathname]);


  return null;

}

export default ScrollToTop;