如何设置 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)
。导航时。这仅解决了在页面之间传输滚动位置的问题。当滚动位置没有恢复时,页面之间导航时的用户体验会严重恶化。我想这就是为什么弹出窗口变得如此流行的部分原因,但它们带来了一长串其他用户体验问题,所以我真的想避免使用它们。
最佳答案
感谢 this comment in oaf-react-router我能够让它与 React Router 6 一起使用。不过,有一些警告,所以我不认为这对于专业的 Web 应用程序来说是一个可行的解决方案。
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 .
关于javascript - 使用 React Router 6 导航时恢复滚动位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70886149/