<ScrollRestoration />

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

此功能仅在使用数据路由器时有效，请参阅 选择路由器

您应该只渲染其中一个，建议您在应用程序的根路由中渲染它

import { ScrollRestoration } from "react-router-dom";

function RootRouteComponent() {
  return (
    <div>
      {/* ... */}
      <ScrollRestoration />
    </div>
  );
}

getKey

可选属性，定义 React Router 应该用来恢复滚动位置的键。

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

默认情况下，它使用 location.key，模拟浏览器在没有客户端路由时的默认行为。用户可以在堆栈中多次导航到相同的 URL，并且每个条目都有自己的滚动位置来恢复。

某些应用程序可能希望覆盖此行为，并根据其他内容恢复位置。考虑一个有四个主要页面的社交应用程序

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

如果用户从 "/home" 开始，向下滚动一点，然后在导航菜单中点击 "messages"，然后在导航菜单中点击 "home"（不是后退按钮！），历史堆栈中将有三个条目

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

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

这里一个可靠的产品决策是，无论用户如何到达（后退按钮或新链接点击），都要保留用户在首页提要上的滚动位置。为此，您需要使用 location.pathname 作为键。

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

或者，您可能希望只对某些路径使用路径名，而对其他所有路径使用正常行为

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

阻止滚动重置

当导航创建新的滚动键时，滚动位置将重置到页面顶部。您可以阻止链接和表单的 "滚动到顶部" 行为

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

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

滚动闪烁

如果没有像 Remix 这样的服务器端渲染框架，您可能会在初始页面加载时遇到一些滚动闪烁。这是因为 React Router 无法在您的 JS 包下载、数据加载和整个页面渲染完成之前恢复滚动位置（如果您正在渲染一个加载器，视窗可能不是保存滚动位置时的尺寸）。

服务器端渲染框架可以防止滚动闪烁，因为它们可以在初始加载时发送一个完全形成的文档，因此滚动可以在页面首次渲染时恢复。