时间戳

首页 > 解决方案 > React router 5：恢复浏览器背面的滚动位置

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

问题描述

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

在用户单击路由器链接并单击浏览器后退按钮后，我试图在长页面中恢复滚动位置。我希望 react-router 能够处理这个问题，但显然他们决定根本不处理它。

我尝试了几个包，例如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 调用，它在返回时会更改状态，从而导致新的渲染。我认为这是一个典型的模式。

标签： reactjsreact-router

解决方案

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

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

danielnixon 的解决方案通常可能是一个更好的解决方案，但我不确定如何实现它：

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

推荐阅读