<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 中的位置。
这里一个可靠的产品决策是，无论用户如何到达主页Feed（后退按钮或新的链接点击），都保持用户的滚动位置。为此，您需要使用 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} />;
