ScrollRestoration

Framework
Data
Declarative

Summary

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

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.

<ScrollRestoration nonce={cspNonce} />

Props

ScriptsProps

A couple common attributes:

<Scripts crossOrigin> for hosting your static assets on a different server than your app.
<Scripts nonce> to support a content security policy for scripts with nonce-sources for your <script> tags.

You cannot pass through attributes such as async, defer, src, type, noModule because they are managed by React Router internally.