How do you handle scroll restoration in a React-Router app

Question

With the help of proper code examples can you tell me How do you handle scroll restoration in a React-Router app?

Answer 1

By default, React Router does not restore scroll positions when navigating. To handle scroll restoration, follow these steps:

1. Use useEffect with useLocation for Manual Scroll Restoration

Scrolls to the top on route changes.

import { useEffect } from "react";

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

const ScrollToTop = () => {

  const { pathname } = useLocation();

  useEffect(() => {

    window.scrollTo(0, 0);

  }, [pathname]);

  return null;

};

export default ScrollToTop;

2. Use ScrollToTop in App.js

Wrap it inside the router to apply globally.

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

import ScrollToTop from "./ScrollToTop";

import Home from "./Home";

import About from "./About";

function App() {

  return (

    <Router>

      <ScrollToTop />

      <Routes>

        <Route path="/" element={<Home />} />

        <Route path="/about" element={<About />} />

      </Routes>

    </Router>

  );

}

export default App;