使用react-router时,我在后退按钮(历史记录popstate)上滚动位置遇到了一些问题.React路由器v4不能处理开箱即用的滚动管理,因为浏览器正在实现一些自动滚动行为.这很好,除非浏览器窗口的高度从一个视图到另一个视图的变化太大.我已经实现了ScrollToTop组件,如下所述:https://reacttraining.com/react-router/web/guides/scroll-restoration
这非常有效.当您单击链接并转到其他组件时,浏览器会滚动到顶部(就像正常的服务器呈现的网站一样).只有当您返回(通过浏览器后退按钮)到窗口高度更高的视图时,才会出现此问题.似乎(chrome)在react呈现内容(和浏览器高度)之前尝试转到上一页的滚动位置.这导致滚动只能根据它来自的视图的高度尽可能地向下移动.想象这个场景:
View1:长电影列表(窗口高度3500px).
(单击电影)
View2:所选电影的详细信息视图(窗口高度:1000px).
(单击浏览器后退按钮)
返回视图1,但滚动位置不能超过1000px,因为chrome在尝试渲染长影片列表之前尝试设置位置.
出于某种原因,这只是Chrome中的一个问题.Firefox和Safari似乎处理得很好.我想知道是否有其他人有这个问题,以及你们如何在React中处理滚动恢复.
注意:所有电影都是从sampleMovies.js导入的 - 所以我不是在等待我的示例中的API响应.