人们如何使用react-router v4处理滚动恢复？

Question

使用react-router时，后退按钮上的滚动位置（历史记录popstate）遇到一些问题。由于浏览器正在实现一些自动滚动行为，因此React
Router
v4无法开箱即用地管理滚动。这很棒，除非浏览器窗口的高度从一个视图到另一个视图变化太大。我已经实现了ScrollToTop组件，如下所述：https : //reacttraining.com/react-
router/web/guides/scroll-restoration

这很好。当您单击链接并转到其他组件时，浏览器将滚动到顶部（就像普通的服务器渲染网站一样）。仅当您返回（通过浏览器的后退按钮）到具有更高窗口高度的视图时，才会发生此问题。似乎（chrome）试图在react呈现内容（和浏览器高度）之前转到上一页的滚动位置。这将导致滚动仅根据其所在视图的高度尽可能远地向下移动。想象一下这种情况：

View1： 一长串电影（窗口高度3500px）。
（单击电影）
View2 ：选定电影的详细信息视图（窗口高度：1000像素）。
（单击浏览器后退按钮）
返回视图1 ，但滚动位置不能超过1000像素，因为chrome试图在react渲染长电影列表之前设置位置。

由于某些原因，这只是Chrome中的问题。Firefox和Safari似乎处理得很好。我想知道是否有人遇到过这个问题，以及你们通常如何在React中处理滚动恢复。

注意：所有电影都是从sampleMovies.js导入的，因此在我的示例中，我不等待API响应。

Answer 1

您如何处理滚动恢复？

事实证明，浏览器具有history.scrollRestoration的实现。

也许您可以使用？检查这些链接。

https://developer.mozilla.org/zh-CN/docs/Web/API/History#Specifications


https://developers.google.com/web/updates/2015/09/history-api-scroll-
restoration

另外，我发现了一个npm模块，该模块可能能够轻松地进行react的滚动恢复，但是该库仅适用于react router v3及以下

https://www.npmjs.com/package/react-router-restore-scroll

https://github.com/ryanflorence/react-router-restore-
scroll

希望对您有所帮助。