使用react-router-dom链接仅更新一个搜索参数

Question

我想保留链接单击时的所有搜索参数并仅更改

page

。

我正在使用 Material UI

Pagination

组件和 React-router-dom 的

Link

。

我尝试传播现有的搜索参数并仅更改

page

，但它删除了所有参数并仅附加第一页。

import Divider from '@mui/material/Divider';
import Box from '@mui/material/Box';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import Pagination from '@mui/material/Pagination';
import { useDataQuery } from '../../api';
import { itemsPerPage } from '../../constants';
import { PaginationItem } from '@mui/material';
import { Link, createSearchParams, useLocation, useSearchParams } from 'react-router-dom';


 export function PaginatedList() {
  const { data } = useDataQuery();
  const [searchParams, setSearchParams] = useSearchParams();
  const location = useLocation();
  const currentPage = Number(searchParams.get('page')) || 1;
  const pageCount = data?.total ? Math.ceil(data?.total / itemsPerPage) : 1;

  return (
    <Box>
      <List>
        {data.items.map((dataItem) => (
          <ListItem key={dataItem.id}>
            <Card item={dataItem} />
          </ListItem>
        ))}
      </List>
      <Divider />
      <Box>
        <Pagination
          defaultPage={1}
          page={currentPage}
          count={pageCount}
          renderItem={(item) => (
            <PaginationItem
              component={Link}
              to={{
                pathname: location.pathname,
                search:
                  item.page === 1
                    ? ''
                    : createSearchParams({
                        ...searchParams,
                        page: item.page?.toString(),
                      }).toString(),
              }}
              {...item}
            />
          )}
        />
      </Box>
    </Box>
  );
}

我也尝试过像这样设置查询，但它似乎没有做任何事情（它没有向路径名附加任何参数）：

to={{
  pathname: location.pathname,
  query: {
    ...searchParams,
    page: item.page,
  },
}}

Answer 1

PaginationItem

组件似乎关闭了搜索参数的过时副本，并且似乎您无法“拦截”

Link

组件的

onClick

事件处理程序来手动处理搜索参数，因为它是

 PaginationItem

组件的点击处理程序需要实现页面更改。

我能想到的最好建议是使用

Pagination

组件的

onChange

处理程序将 URL 搜索参数同步到更改后的页面值。

示例：

<Pagination
  defaultPage={1}
  page={currentPage}
  count={pageCount}
  onChange={(e, page) => {
    setSearchParams((searchParams) => {
      if (page === 1) {
        searchParams.delete("page");
      } else {
        searchParams.set("page", page);
      }
      return searchParams;
    });
  }}
  renderItem={(item) => <PaginationItem {...item} />}
/>