React router 5：恢复浏览器背面的滚动位置答案

【问题标题】：React router 5: restoring scroll position on browser backReact router 5：恢复浏览器背面的滚动位置
【发布时间】：2019-12-15 05:55:17
【问题描述】：

关于 SO 有类似的问题，但是 react-router 版本不同，我没有找到适合我的答案。

在用户单击路由器链接并单击浏览器后退按钮后，我正在尝试恢复长页面中的滚动位置。我希望 react-router 能够处理这个问题，但显然他们已经决定not handle it at all。

我尝试了几个包如react-scroll-manager和react-router-scroll，但无济于事：使用back时，无论我使用Firefox还是Chromium，位置总是在文档的顶部。该页面不会立即加载，但只需不到一秒钟。

有没有适用于 react-router-dom 5 BrowserRouter 的解决方案？

一般结构如下：

<BrowserRouter>
  <main>
    <h1>...</h1>
    <Switch>
      <Route exact path='...'
      ...
    </Switch>
  </main>
</BrowserRouter>

编辑：澄清一下，页面不会立即加载，因为有一个 AJAX 调用，它在返回时会更改状态，从而导致新的渲染。我认为这是一个典型的模式。

【问题讨论】：

嗨 @Damien 参考 react-router 文档有一种方法可以使用 HOC github.com/ReactTraining/react-router/blob/master/packages/…在顶部滚动
我知道，我不想滚动到顶部，因为它已经在这样做了。我希望用户单击要恢复的链接时存在的滚动位置（链接通常会发生 - 这是用户期望的行为）。
我认为你需要像github.com/ReactTraining/react-router/blob/master/packages/… 这样的东西我们可以为所有按钮编写自定义点击方法，链接将以当前位置作为参数，可以存储在本地存储中，redux 就像历史然后从那里我们可以获取旧位置并使用样式设置
你能确定为什么 react-scroll-manager 不适合你吗？这让我很惊讶。我写了一个类似的东西，但我怀疑它对你不起作用，原因与 react-scroll-manager 不一样（不管是什么）：github.com/oaf-project/oaf-react-router
另一种选择是在您的 ajax 响应可用时立即执行 history.replace()。然后稍后，在用户导航回来后，您使用路由状态来呈现页面，而不是再次发出 ajax 请求。

【解决方案1】：

到目前为止，我为我的应用程序找到了两种解决此问题的方法，但它们可能不适用于所有项目：

使用oaf-react-router，它还固定焦点以提高可访问性，选项wrapHistory(history, { renderTimeout: 500 });。缺点是您必须设置延迟，这可能无法适应所有用户，具体取决于他们的连接速度。
沿历史路径缓存 AJAX 查询的结果。在我的例子中，我只需要为每种不同的对象类型缓存最新的结果。这符合用户的期望：滚动位置恢复，页面内容不会自动更新。但它可能不适用于所有应用程序。

danielnixon 的解决方案总体上可能会更好，但我不确定如何实施：

另一种选择是在您的 ajax 响应可用时立即执行 history.replace()。然后稍后，在用户导航回来后，您使用路由状态来呈现页面，而不是再次发出 ajax 请求。

【讨论】：