ReactJS-如何在路由更改时实现分页以保持状态响应？

Question

我有一个react应用，我使用react-router v.4，并且使用来自Jason的分页。 http://jasonwatmore.com/post/2017/03/14/react-pagination-example-with-logic-like-google 一切正常。 无论如何，当我更改路线然后再更改路线时，分页会将当前页面更改回第一页。 更改路线时如何保持页面状态？

Answer 1

使用react router，有多种方法可以解决此问题：Router中的道具传递给您的组件，您可以使用param：

<Route path="/items/:page" component={Component} />

和/ items / 1，/ items / 2并使用

props.match.params.page

基于此示例的快速浏览，此处：

this.setPage(this.props.match.params.page || this.props.initialPage)

要更改网址，请在onChangePage甚至onClick处理程序中使用类似 this.props.history.push(`/items/${page}`。 您还可以使用location.pathname属性并解析字符串，或使用item?page=1并解析location.search等。

如果要全局维护状态而不是从路由器维护状态，则可以使用Redux。