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

Question

如何设置 React Router 6 以在我导航和刷新浏览器窗口时恢复滚动位置？
React 路由器 5 有一个 page about scroll restoration ，但我在 the docs for v6 中找不到任何关于滚动的信息，所以我想你应该用另一个包自己处理这个问题。很公平，但我找不到任何与 React Router 6 兼容的东西。
包裹react-scroll-restoration和 oaf-react-router需要 v5。 (oaf-react-router 确实列出了它支持 v6，但 basic usage code example 与 v6 不兼容，the related issue #210 仍然开放。)
Gatsby 和 Next.js 支持开箱即用的滚动恢复，但我看起来没有一个可以直接使用的整齐打包的包。
这个小demo app with server side rendered pages做我想做的事。当来回导航并刷新浏览器窗口时，滚动位置会恢复。
这里是 the same app using React Router 6 ，滚动位置没有保存和恢复，但实际上在页面之间重用。通常的解决方法是在页面导航时滚动到顶部，但我对这种行为不感兴趣。
编辑:React Query writes that the issue with scroll restoration is that pages are refetching data ，从而暗示如果用于渲染页面的数据在那里，滚动恢复就可以工作。我无法确认这一点，因为我的小型 React Router 6 应用程序即使根本没有进行任何数据获取也存在问题。我觉得为了让它发挥作用，我觉得我缺少一些小东西。
咆哮:我很惊讶这个问题的典型答案是调用window.scrollTo(0, 0)。导航时。这仅解决了在页面之间传输滚动位置的问题。当滚动位置没有恢复时，页面之间导航时的用户体验会严重恶化。我想这就是为什么弹出窗口变得如此流行的部分原因，但它们带来了一长串其他用户体验问题，所以我真的想避免使用它们。

Answer 1

感谢 this comment in oaf-react-router我能够让它与 React Router 6 一起使用。不过，有一些警告，所以我不认为这对于专业的 Web 应用程序来说是一个可行的解决方案。

如 this code comment 中所述, oaf-react-router必须使用相同版本的history如react-router-dom做。这就是为什么HistoryRouter导出为 unstable_HistoryRouter .这个解决方案确实感觉很不稳定。

oaf-react-router刷新网页时不恢复滚动位置。我不知道这是否可以轻松实现，这可能是可以接受的。

import { createBrowserHistory } from 'history';
import { wrapHistory } from 'oaf-react-router';
import React from 'react';
import ReactDOM from 'react-dom';
import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom';

const history = createBrowserHistory();
wrapHistory(history);

ReactDOM.render(
  <React.StrictMode>
    <HistoryRouter history={history}>
      <App />
    </HistoryRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

Here a full working example on StackBlitz .