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

Question

我有一个 React 应用程序，我使用 react-router v.4，我使用 Jason 的分页。 http://jasonwatmore.com/post/2017/03/14/react-pagination-example-with-logic-like-google

一切正常，但是，当我更改路线然后将路线更改回来时，分页会将当前页面更改回第 1 页。

路由更改时如何保持页面状态？

Answer 1

使用 react 路由器，有多种方法可以处理此问题：路由器中的道具传递给您的组件，您可以使用参数：

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

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

props.match.params.page

基于对示例的快速查看，这里：

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

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

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