这很好用.当您单击链接并转到其他组件时,浏览器会滚动到顶部(就像正常的服务器呈现的网站一样).只有当您返回(通过浏览器后退按钮)到窗口高度更高的视图时,才会出现此问题.似乎(chrome)在react呈现内容(和浏览器高度)之前尝试转到上一页的滚动位置.这导致滚动仅根据它来自的视图的高度尽可能地向下移动.想象这个场景：
View1：长电影列表(窗口高度3500px).
(点击电影)
View2：所选电影的详细信息视图(窗口高度：1000px).
(单击浏览器后退按钮)
返回视图1,但滚动位置不能超过1000px,因为chrome在尝试渲染长影片列表之前尝试设置位置.
出于某种原因,这只是Chrome中的一个问题. Firefox和Safari似乎处理得很好.我想知道是否有其他人遇到过这个问题,以及你们如何在React中处理滚动恢复.
注意：所有电影都是从sampleMovies.js导入的 – 所以我不是在等待我的示例中的API响应.
结果是浏览器具有history.scrollRestoration的实现.
也许你可以使用它？检查这些链接.
https://developer.mozilla.org/en/docs/Web/API/History#Specifications
https://developers.google.com/web/updates/2015/09/history-api-scroll-restoration
另外,我发现一个npm模块可能能够轻松地处理滚动恢复,但是这个库只适用于反应路由器v3及以下版本
https://www.npmjs.com/package/react-router-restore-scroll
https://github.com/ryanflorence/react-router-restore-scroll
我希望这可以提供帮助.
