> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/remix-run/react-router/llms.txt
> Use this file to discover all available pages before exploring further.
# ScrollRestoration
Emulates the browser's scroll restoration on location changes. Apps should only render one of these, right before the `` component.
```tsx theme={null}
import { ScrollRestoration } from "react-router";
export default function Root() {
return (
);
}
```
## Type Declaration
```tsx theme={null}
export interface ScrollRestorationProps {
getKey?: GetScrollRestorationKeyFunction;
storageKey?: string;
nonce?: string;
}
export function ScrollRestoration({
getKey,
storageKey,
nonce,
}: ScrollRestorationProps): React.ReactElement | null;
type GetScrollRestorationKeyFunction = (
location: Location,
matches: UIMatch[]
) => string;
```
## Props
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`.
```tsx theme={null}
{
// Restore based on a unique location key (default behavior)
return location.key;
// Restore based on pathname
return location.pathname;
// Restore based on some paths, but not others
const paths = ["/", "/chat"];
return paths.includes(location.pathname)
? location.pathname
: location.key;
}}
/>
```
The key to use for storing scroll positions in `sessionStorage`. Defaults to `"react-router-scroll-positions"`.
```tsx theme={null}
```
The nonce to use for the inline script tag. This is useful for Content Security Policy (CSP) compliance.
```tsx theme={null}
```
## Examples
### Basic Usage
```tsx theme={null}
import { ScrollRestoration, Scripts } from "react-router";
export default function Root() {
return (
My App
);
}
```
### Pathname-based Restoration
```tsx theme={null}
{
// Always restore scroll to the same position for a given pathname
return location.pathname;
}}
/>
```
### Conditional Restoration
```tsx theme={null}
{
// Don't restore scroll on the home page
if (location.pathname === "/") {
return location.key;
}
// Restore scroll for list pages but not detail pages
const isListPage = matches.some(
(match) => match.handle?.scrollMode === "list"
);
return isListPage ? location.pathname : location.key;
}}
/>
// In route configuration
{
path: "products",
Component: ProductsList,
handle: { scrollMode: "list" },
}
```
### With CSP Nonce
```tsx theme={null}
export default function Root() {
const nonce = useNonce(); // Get nonce from your app
return (
);
}
```
### Preventing Scroll Reset
You can prevent scroll reset on individual navigations using the `preventScrollReset` prop on `` or `