react-router-dom中useSearchParams调用删除方法意外修改pathname求助

问题出在你直接修改了useSearchParams返回的原searchParams实例，再传递给setSearchParams。由于URLSearchParams是可变对象，直接操作原实例会导致react-router内部路由状态处理异常，意外重置了pathname。

修正方案 #

每次修改查询参数时，基于当前searchParams创建新的URLSearchParams副本，修改副本后再传给setSearchParams，同时同步修正appendSearchParams的逻辑（当前代码是替换所有参数而非追加）。

修正后的完整代码：

import { useSearchParams } from 'react-router-dom';
import { useMemo, useCallback } from 'react';

function useSearchParameters(queryKey?: string) {
  const [searchParams, setSearchParams] = useSearchParams();

  const queryParams = useMemo(() => {
    return queryKey ? searchParams.getAll(queryKey) : [];
  }, [searchParams, queryKey]);

  const appendSearchParams = useCallback(
    (param: { [key: string]: string }, replace = false) => {
      // 创建当前查询参数的独立副本
      const newSearchParams = new URLSearchParams(searchParams);
      // 遍历参数并设置（如需追加相同key的多个值，改用newSearchParams.append(key, value)）
      Object.entries(param).forEach(([key, value]) => {
        newSearchParams.set(key, value);
      });
      setSearchParams(newSearchParams, { replace });
    },
    [searchParams, setSearchParams],
  );

  const deleteSearchParams = useCallback(
    (queryKey: string) => {
      // 创建当前查询参数的独立副本
      const newSearchParams = new URLSearchParams(searchParams);
      newSearchParams.delete(queryKey);
      setSearchParams(newSearchParams);
    },
    [searchParams, setSearchParams],
  );

  return {
    searchParams,
    queryParams,
    appendSearchParams,
    deleteSearchParams,
  };
}

export default useSearchParameters;

关键修改说明 #

• 所有参数修改操作都基于新创建的URLSearchParams副本进行，避免直接修改原实例引发路由状态异常
• appendSearchParams改为基于副本添加参数，确保不会覆盖原有查询参数（如果需要给同一个key追加多个值，将set方法替换为append即可）

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