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} /> 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.