使用react-router-dom Link仅更新page搜索参数并保留其余参数的问题

要实现点击分页链接时保留现有搜索参数、仅修改page参数，核心是正确操作URLSearchParams实例，结合React Router的API生成正确的链接地址，以下是具体方案：

关键问题分析 #

• 直接扩展searchParams对象会失效，因为URLSearchParams是类实例而非普通JS对象，解构或扩展操作无法保留其内部结构和方法。
• React Router的Link组件不再推荐使用query属性，需通过search属性传入格式化后的搜索参数字符串。

具体实现步骤 #

1. 获取当前搜索参数：使用React Router的useSearchParams钩子获取当前URL的搜索参数实例。
2. 复制并修改参数：创建当前searchParams的副本，调用set方法修改page参数，避免直接修改原实例。
3. 自定义分页链接：在Material-UI的Pagination组件中，通过renderItem属性自定义PaginationItem的渲染，将component设为Link，并传入包含新搜索参数的to属性。

完整代码示例 #

修改你的PaginatedList.jsx文件：

import React from "react";
import { Pagination, PaginationItem } from "@mui/material";
import { Link, useSearchParams } from "react-router-dom";

export default function PaginatedList() {
  // 获取当前搜索参数实例
  const [searchParams] = useSearchParams();

  return (
    <div>
      <h1>Paginated List</h1>
      <Pagination
        count={10}
        renderItem={(item) => {
          // 复制现有搜索参数，修改page值
          const newSearchParams = new URLSearchParams(searchParams);
          newSearchParams.set("page", item.page.toString());

          return (
            <PaginationItem
              component={Link}
              to={{
                pathname: window.location.pathname, // 保持当前路由路径
                search: newSearchParams.toString() // 传入新的搜索参数字符串
              }}
              {...item}
            />
          );
        }}
      />
    </div>
  );
}

注意事项 #

• 必须创建searchParams的副本（new URLSearchParams(searchParams)），否则会直接修改当前路由的参数状态，引发不必要的重渲染。
• 确保page参数的值是字符串类型，URLSearchParams的set方法要求参数值为字符串。

内容的提问来源于stack exchange，提问作者user9314872