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

Question

在我的反应应用程序中，我有一个需要分页的组件。我想做的是实际上允许从 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; 的辅助函数

Answer 1

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

用法：

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})
}