使用 React Router 6 导航时恢复滚动位置

如何设置 React Router 6 以在导航和刷新浏览器窗口时恢复滚动位置？

React Router 5 有一个关于滚动恢复的页面 https://v5.reactrouter.com/web/guides/scroll-restoration，但我找不到任何有关滚动的信息v6 的文档 https://reactrouter.com/docs/en/v6/api，所以我想你应该用另一个包自己处理这个问题。很公平，但我找不到任何与 React Router 6 兼容的东西。

套餐反应滚动恢复 https://github.com/nanyang24/react-scroll-restoration#readme and oaf-react-路由器 https://github.com/oaf-project/oaf-react-router#readme需要 v5. （oaf-react-router 确实列出了它支持 v6，但是基本使用代码示例 https://github.com/oaf-project/oaf-react-router#basic-usage与 v6 不兼容，并且相关问题#210 https://github.com/oaf-project/oaf-react-router/issues/210仍然开放。）

Gatsby 和 Next.js 支持开箱即用的滚动恢复，但我看起来没有一个可以直接使用的整齐打包的包。

这个小带有服务器端渲染页面的演示应用程序 https://stackblitz.com/edit/bootstrap-5-9obbti做我想做的事。当来回导航并刷新浏览器窗口时，滚动位置会恢复。

Here is 使用 React Router 6 的同一个应用程序 https://react-ts-1b4lqz.stackblitz.io/，其中滚动位置不会保存和恢复，但实际上会在页面之间重用。通常的解决方法是每当导航页面时滚动到顶部，但我对这种行为不感兴趣。

Edit: React Query 写道，滚动恢复的问题是页面正在重新获取数据 https://react-query.tanstack.com/guides/scroll-restoration，这意味着如果用于渲染页面的数据存在，则滚动恢复就可以工作。我无法确认这一点，因为我的小型 React Router 6 应用程序即使根本没有进行任何数据获取也存在问题。我觉得为了让它发挥作用，我缺少一些小东西。

Rant：我很惊讶这个问题的典型答案是打电话window.scrollTo(0, 0)导航时。这仅解决了页面之间滚动位置转移的问题。当滚动位置未恢复时，在页面之间导航时的用户体验会严重恶化。我想这就是弹出窗口变得如此流行的部分原因，但它们带来了一系列其他用户体验问题，所以我真的想避免使用它们。

The ScrollRestoration https://reactrouter.com/en/main/components/scroll-restoration组件正是处理这个问题的。它需要使用数据路由器，例如通过调用创建的路由器createBrowserRouter https://reactrouter.com/en/main/routers/create-browser-router（推荐用于所有新的 React Router Web 项目）。

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

要使用它，只需在应用程序根组件中渲染一次即可：

import { ScrollRestoration } from "react-router-dom";
function App() {
    return <>
        <div>Some content...</div>
        <ScrollRestoration/>
    </>;
}