reactjs - 如何使用历史更新 react 路由器的分页栏？

Question

这些是我的路线:

<BrowserRouter>
  <Switch>
    <Route exact path="/" component={Home} />
    <Route exact path="/pages" component={Pages} />
    <Route path="/page/:page(\d+)" component={Pages} />
  </Switch>
</BrowserRouter>

这是我遇到问题的组件:

class Pages extends React.Component {
  buildHref = href => `/page/${href}`;

  componentDidMount() {
    this.props.history.push(this.props.match.url);
  }

  handlePageChange = page => {
    this.props.history.push(`/page/${page.selected + 1}`);
  };

  render() {
    return (
      <div>
        <ReactPaginate
          previousLabel="<"
          nextLabel=">"
          pageCount={10}
          pageRangeDisplayed={10}
          onPageChange={this.handlePageChange}
          initialPage={parseInt(this.props.match.params.page - 1, 0)}
          containerClassName={"pagination"}
          activeClassName={"active"}
          hrefBuilder={this.buildHref}
        />
      </div>
    );
  }
}

export default withRouter(Pages);

代码:

当我返回使用浏览器的历史记录时，url 会更新，但分页栏不会改变。事件类保留在同一元素上。在这种情况下，使用正确的事件页码重新呈现分页栏的最佳方法是什么？

同样返回它会在某一时刻显示/page/NaN，之后就不可能继续了。

Answer 1

为什么要从初始页面选择中减去 1:

initialPage={parseInt(this.props.match.params.page - 1, 0)}

您希望分页组件显示与 url 相同的数字。

所以 initialPage={parseInt(this.props.match.params.page, 0)} 应该可以正常工作

---

另外为什么有:

  componentDidMount() {
    this.props.history.push(this.props.match.url);
  }

你不应该需要它，它可能会干扰你的分页更新