`<ScrollRestoration>`

此组件将在 loader 完成后模拟浏览器在位置更改时恢复滚动。这可以确保滚动位置在正确的时间恢复到正确的位置，即使跨域也是如此。

¥This component will emulate the browser's scroll restoration on location changes after loaders have completed. This ensures the scroll position is restored to the right spot, at the right time, even across domains.

你只需要渲染其中一个，就在 <Scripts/> 组件之前。

¥You should only render one of these, right before the <Scripts/> component.

import {
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

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

属性

¥Props

`getKey`

可选。定义用于恢复滚动位置的键。

¥Optional. Defines the key used to restore scroll positions.

<ScrollRestoration
  getKey={(location, matches) => {
    // default behavior
    return location.key;
  }}
/>

Discussion

使用 location.key 可以模拟浏览器的默认行为。用户可以在堆栈中多次导航到同一个 URL，并且每个条目都会有自己的滚动位置来恢复。

¥Using location.key emulates the browser's default behavior. The user can navigate to the same URL multiple times in the stack, and each entry gets its own scroll position to restore.

一些应用可能希望覆盖此行为并根据其他内容恢复位置。假设一个社交应用有四个主要页面：

¥Some apps may want to override this behavior and restore position based on something else. Consider a social app that has four primary pages:

"/home"
"/messages"
"/notifications"
"/search"

如果用户从 "/home" 开始，向下滚动一点，点击导航菜单中的 "messages"，然后点击导航菜单中的 "home"（不是返回按钮！），则历史记录堆栈中将包含三个条目：

¥If the user starts at "/home", scrolls down a bit, clicks "messages" in the navigation menu, then clicks "home" in the navigation menu (not the back button!) there will be three entries in the history stack:

1. /home
2. /messages
3. /home

默认情况下，React Router（和浏览器）将为 1 和 3 存储两个不同的滚动位置，即使它们具有相同的 URL。这意味着当用户从 2 导航到 3 时，滚动位置会移到顶部，而不是恢复到 1 中的位置。

¥By default, React Router (and the browser) will have two different scroll positions stored for 1 and 3 even though they have the same URL. That means as the user navigated from 2 → 3 the scroll position goes to the top instead of restoring to where it was in 1.

一个可靠的产品决策是，无论用户如何到达主页（返回按钮或点击新链接），都将其滚动位置保持在主页上。为此，你需要使用 location.pathname 作为键。

¥A solid product decision here is to keep the users' scroll position on the home feed no matter how they got there (back button or new link clicks). For this, you'd want to use the location.pathname as the key.

<ScrollRestoration
  getKey={(location, matches) => {
    return location.pathname;
  }}
/>

或者，你可能只想对某些路径使用路径名，而对其他所有路径使用正常行为：

¥Or you may want to only use the pathname for some paths and use the normal behavior for everything else:

<ScrollRestoration
  getKey={(location, matches) => {
    const paths = ["/home", "/notifications"];
    return paths.includes(location.pathname)
      ? // home and notifications restore by pathname
        location.pathname
      : // everything else by location like the browser
        location.key;
  }}
/>

`nonce`

<ScrollRestoration> 渲染一个内联 <script> 以防止滚动闪烁。nonce 属性将传递给脚本标签，以允许使用 CSP nonce。

¥<ScrollRestoration> 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} />

防止滚动重置

¥Preventing Scroll Reset

导航到新位置时，滚动位置将重置到页面顶部。你可以阻止链接和表单中的 "滚动到顶部" 行为：

¥When navigating to new locations, the scroll position is reset to the top of the page. You can prevent the "scroll to top" behavior from your links and forms:

<Link preventScrollReset={true} />;
<Form preventScrollReset={true} />;

另请参阅：<Form preventScrollReset>、<Link preventScrollReset>