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 路由器，有多种方法可以处理这个问题：来自路由器的 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。