Reactjs-如何让用户在返回单击时返回到列表项的上一个位置

有人能帮我解决以下问题吗 目前，我通过在API调用中给出页码来无限加载项目列表。假设我使用page=1调用项目列表api，然后调用第2页（一旦到达第1页的末尾，它将加载下一页的项目），以此类推

假设我现在在第3页。如果用户单击第3页上的任何项目，他将被重定向到详细信息页面。如果他点击浏览器返回按钮，他应该返回到第3页的点击项，而不是在页面顶部，即列表的第一项

我怎样才能做到这一点

FYI

componentDidMount

第一次调用api，随后在下一页调用

onScroll

方法

我尝试的解决方案： 在redux中保持单击的项目位置和页面。一旦我回到列表，我将加载api，直到保存的“页码”不加载。一旦预期页面加载，我将滚动到项目位置。 ==>此解决方案的问题是用户必须等待预期页码的响应，一旦预期页码的结果出现，它将滚动到单击的项目位置。所以这看起来很烦人

使用

      <Router history={browserHistory}>
        <Root>{routes(pages)}</Root>
      </Router>

{路由（页面）}

将其添加到App.Js中，使用browserHistory。在以后的组件中，您可以使用

this.props.history.goBack（）

使用按钮/锚定标记绑定操作

---

谢谢

您必须使用

localStorage

保存从服务器获得的响应，当用户返回到您的页面时，您可以立即向他显示响应，并在后台更新列表

---

Service worker也是一种很好的方法。

您的意思是我需要将所有页面数据存储到redux/localstorage中。当用户返回列表时，是否立即显示保存的列表并滚动到特定项目？顺便说一句，在后台更新什么？是的，我的意思是你可以将最新数据存储在

localStorage

中，并在用户进来后立即设置存储，然后发送http请求并再次获取数据，并将

localStorage

更新为最新版本data@VikasHiran您可以通过在reducer中执行类似以下代码来实现这一点：

data:JSON.parse（localStorage.getItem（'data'））| |[]，

但是如果数据很大呢？在localstorage/redux中存储是否明智？@VikasHiran详细信息页面位于Rouer中吗？如何将用户重定向到另一个页面？当您将用户发送到详细信息页面时，还可以使用Ref&handle发送滚动位置，将其推到history。