Scroll Restoration REACT

React Router’s default behavior :

React Router’s default behavior without scroll restoration does not preserve the scroll position when navigating between routes in a single-page application. This means that when users move to a new page or go back to a previous page, the scroll position typically resets to the top of the page instead of returning to where they left off. As a result, users may have to manually scroll back to their previous position, which can feel jarring and interrupt the browsing experience, especially on long pages like blog lists or feeds.

What is ScrollRestoration in React Router?

The scrollRestoration feature in React Router preserves the scroll position of a page when users move between routes in a single-page application. This means that when users navigate backward or forward, their previous scroll position is restored automatically, providing a smoother browsing experience.

Step 1 :

Create Routes :

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path='/' element={<Root />}>
      <Route path='' element={<Home />} />
      <Route path='about' element={<About />} />
      <Route path='contact' element={<Contact />} />
    </Route>
  )
)

Step 2 :

Manage your <Root /> :

import Header from './components/Header/Header'
import Footer from './components/Footer/Footer'
import { Outlet, ScrollRestoration } from 'react-router-dom'

function Root() {

  return (
    <>
      <Header />
      <Outlet />
      <Footer />
      <ScrollRestoration
        key={(location, matches) => {
          return location.pathname
        }}
      />
    </>
  )
}

export default Root

What is key prop in ScrollRestoration?

The <ScrollRestoration> component in React Router uses the getKey prop to customize how scroll positions are saved and restored during navigation. The getKey prop is a function that defines the key used to identify each route’s scroll position. By default, it returns location.key, which is a unique identifier for each route. This ensures that React Router tracks the scroll position separately for every route and restores it correctly when users revisit a page they’ve already viewed.

For More: Click
Similar Blogs: Click