Reactjs - 掌握细节导航 - 当回去时Master应该在同一个位置

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

据我所知，即使页面不再可见，您仍希望状态持续存在。我能想到的最简单的方法是简单地始终保持Master页面呈现，但是在要呈现详细页面时将display: none放在上面。

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

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