Reactjs - 大师细节导航 - 回去时大师应该在同一个位置

Question

我有一个母版页。此页面中有一个列表和一个加载更多按钮。最初，应用程序显示 100 个项目。每次用户单击加载更多按钮时，它都会加载 100 多个项目并将它们附加到列表中。列表可能会变得很长，如果项目很多，用户可能会滚动很长时间。

在滚动时，用户可以点击任何项目，它会转到详细信息页面。然后，详细信息页面需要显示有关该项目的一些信息。在这个页面上也应该有一个后退按钮。当按下这个后退按钮时，它需要返回到母版页，但母版页需要看起来与在进入详细信息页之前完全相同。它应该具有相同的滚动位置以及之前在那里加载的所有相同项目。这就是问题所在，因为我无法做到这一点。

我尝试过使用 react-router，但是当导航到新路由并返回时，母版页总是会被渲染，并且滚动位置在顶部，仅加载了最初的 100 个项目。

我已阅读我应该保存滚动位置以及从我的服务加载的每个项目以将其保存在本地存储中。然后，当回到主服务器时，再次加载所有内容。问题是如果我有 1000 个项目，这需要很长时间并且用户可用性不是很好。我本质上是希望母版页的整个状态始终保持不变。

我也尝试过{!this.state.isPageOneHidden && <showPageOne> } 之类的方法，我会切换此状态，但会出现同样的问题。一旦我切换此属性，组件就会被破坏，当我将它切换回来时，母版页会从头开始重新创建并返回到顶部，再次只显示最初的 100 个项目。

function BasicExample() {
  return (
    <Router>
        <Route exact path="/" component={Master} />
        <Route path="/detail/:id" component={Detail} />
    </Router>
  );
}

function Master() {
  return (
    <div>

      /*
        Everytime the Load More button is pressed it makes a call to a service and gets some data to append to the list
      */
      {someArray.map(item => (

           <MyItem key={item.id} dataObject={post} onClick="this.goToDetailPage" />

        ))}

      <Button>Load 10 More</Button>
    </div>
  );
}


function Detail() {
  return (
    <div>

     /*
        Show some detail information here. There should be a back button to transition back to the master page.
     */
    </div>
  );
}


export default BasicExample;

Answer 1

据我了解，即使页面不再可见，您也希望状态持续存在。我能想到的最简单的实现方法是始终保持母版页呈现，但在要呈现详细信息页时将display: none 放在上面。

另一种方法是将 Master 状态存储在像 redux 这样的全局状态管理系统中，因此即使组件的本地状态消失了，您仍然可以保留 redux 状态并改用它。

最后，您可以将应用程序的状态存储在 localStorage 中，然后在母版页的构造函数中从中恢复您的状态。