<ScrollRestoration>此组件将模拟浏览器在位置更改后完成 loader 时的滚动恢复。 这确保了即使跨域，滚动位置也会在正确的时间恢复到正确的位置。
您应该只渲染一个，就在 <Scripts/> 组件之前。
import {
Scripts,
ScrollRestoration,
} from "@remix-run/react";
export default function Root() {
return (
<html>
<body>
{/* ... */}
<ScrollRestoration />
<Scripts />
</body>
</html>
);
}
getKey可选。 定义用于恢复滚动位置的键。
<ScrollRestoration
getKey={(location, matches) => {
// default behavior
return location.key;
}}
/>
使用 location.key 模拟浏览器的默认行为。 用户可以多次导航到堆栈中的同一个 URL，并且每个条目都有自己的滚动位置可恢复。
某些应用程序可能希望覆盖此行为，并根据其他内容恢复位置。 考虑一个具有四个主要页面的社交应用程序
如果用户从 "/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;
}}
/>
nonce<ScrollRestoration> 渲染一个内联 <script> 以防止滚动闪烁。 nonce 属性将传递给脚本标签以允许 CSP nonce 使用。
<ScrollRestoration nonce={cspNonce} />
导航到新位置时，滚动位置将重置到页面顶部。 您可以阻止链接和表单中的 "滚动到顶部" 行为
<Link preventScrollReset={true} />;
<Form preventScrollReset={true} />;
