React Router，使用查询字符串进行分页

问题描述

在我的 React 应用程序中，我有一个需要分页的组件。我想做的是实际上允许从 url 进行分页，而不仅仅是 ui。所以如果我去

localhost\users?page=2

我可以将链接分享给任何人，他们将被重定向到用户组件的第 2 页。

目前我正在做这样的事情

<Pagination
  page={state.pageNo}
  count={state.pageCount}
  variant="outlined"
  shape="rounded"
  color="secondary"
  showLastButton={state.pageCount > 7}
  showFirstButton={state.pageCount > 7}
  hideNextButton={state.pageCount === 1}
  hidePrevButton={state.pageCount === 1}
  onChange={onPageChange}

  renderItem={pageItem => (
    <PaginationItem
      type={'start-ellipsis'}
      component={Link}
      selected
      to={`${pageItem.page}`}
      {...pageItem}
    />
  )}
/>

我的路线模板看起来像这样

 { path: 'users/:id',element: <UsersList /> }

所以我实际上可以转到 localhost/users/2 但这不是我想要使用的正确 url 表单，它链接到一个 UserDetails 组件，它应该保持这种方式。

我可以从 URL 中提取查询参数，但不知道如何使用它们

const query = useQuery();
const { page } = queryString.parse(query);

其中 useQuery 是包装 useLocation().search; 的辅助函数

解决方法

您应该在 this.props.location.search 中使用 window.location.search 或 URLSearchParams 和 Page Component

用法：

const page = new URLSearchParams(this.props.location.search).get("page")

或

const page = new URLSearchParams(window.location.search).get('page')

page 变量，您可以传递给您的 Pagination 组件

// Example
componentDidUpdate() {
    const page = new URLSearchParams(this.props.location.search).get('page')
    // for example you are maintaining page inside state then
    this.setState({page})
}