ScrollRestoration

[MODES: framework, data]

Summary

Reference Documentation ↗

Emulates the browser's scroll restoration on location changes. Apps should only render one of these, right before the Scripts component.

tsx

import { ScrollRestoration } from "react-router";

export default function Root() {
  return (
    <html>
      <body>
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

This component renders an inline <script> to prevent scroll flashing. The nonce prop will be passed down to the script tag to allow CSP nonce usage.

tsx

<ScrollRestoration nonce={cspNonce} />

Signature

tsx

function ScrollRestoration({
  getKey,
  storageKey,
  ...props
}: ScrollRestorationProps)

Props

getKey

A function that returns a key to use for scroll restoration. This is useful for custom scroll restoration logic, such as using only the pathname so that later navigations to prior paths will restore the scroll. Defaults to location.key. See GetScrollRestorationKeyFunction.

tsx

<ScrollRestoration
  getKey={(location, matches) => {
    // Restore based on a unique location key (default behavior)
    return location.key

    // Restore based on pathname
    return location.pathname
  }}
/>

nonce

A nonce attribute to render on the <script> element

storageKey

The key to use for storing scroll positions in sessionStorage. Defaults to "react-router-scroll-positions".