javascript - 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 Router，有多种方法可以处理这个问题:Router 的 props 传递给你的组件，你可以使用参数:

<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。