Question

我正在开发一个具有以下路由的React应用程序：

<Switch>
        <Route path="/edituser/:username" component={EditUser}/>
        <Route path="/createuser/:type" component={EditUser}/>
        <Route path="/listusers" component={ListUsers}/> 
</Switch>

ListUsers组件显示具有分页的表，其中表中的每个组件都有指向/edituser/:username的链接。

我可以通过单击表中的项目来编辑用户，但是正如期望的那样，通过react，一旦我回到listusers/，该组件将再次加载，并且将位于用户的第一页。我想成为最初访问用户的页面。

实现此目标的最佳模式是什么？我曾考虑过将页码传递到/edituser，然后再传递回/listuser，但是我又不得不再次加载所有分页的结果。本地存储是唯一的选择吗？非常感谢任何指针。

Answer 1

您可以在/listusers端点的URL中添加页码。也许像/listusers/2或/listusers?page=2这样，当您按下浏览器的“后退”按钮时，您就直接在那里。您可以做的最后一件事，但在这种情况下我不建议在历史状态下存储页码。

根据经验，为了取回，宁愿使用历史记录而不是使用本地存储。

如果您确实想将数据保留在内存中，则可以始终使用位于较高组件（例如根组件）中的存储，并在此保留先前的查询。但是，在这种情况下，您需要注意许多路由问题：

缓存无效：在此期间，服务器端的数据已更改
用户以某种方式返回到具有另一个表格页码的页面
加载的用户按下浏览器的back按钮

Answer 2

针对您的问题有两种解决方案：

1）传递最后一个活动页面广告路由参数，并相应地设置分页。

在您的 componentDidMount 上，您可以使用它来设置状态。例如：

const pageNumber = this.props.match.params.pageNumber;

2）在路由中传递 state 属性。例如：

  <链接
    到= {{
    路径名：“ / listusers”，
    状态：{pageNumber：1}
  }} />

在您的 componentDidMount 上，您可以使用它来设置状态。例如：

const pageNumber = this.props.location.state.pageNumber;

在反应中显示/隐藏路线组件

2 个答案: