React Router中useSearchParams无法删除查询参数的问题

核心错误原因 #

你直接调用searchParams.delete('categories')但没生效，是因为useSearchParams返回的searchParams是不可变对象——你对它的修改只会在内存中生成副本，并不会自动同步到URL上，必须通过setSearchParams方法才能让修改生效。

修正后的useEffect代码 #

useEffect(() => {
  if (filters.length) {
    setSearchParams({
      categories: filters.map((category) => category.toLowerCase()).join(','),
    });
  } else {
    // 先创建副本修改，再通过setSearchParams提交更新
    const newSearchParams = new URLSearchParams(searchParams);
    newSearchParams.delete('categories');
    setSearchParams(newSearchParams);
  }
}, [filters, searchParams, setSearchParams]);

额外代码小问题修复 #

你的handleCategoryClick里存在变量错误——使用了未定义的value，实际应该用参数category，否则筛选逻辑会失效，修正后：

const handleCategoryClick = useCallback((category: string) => {
  const updatedFilters = [...filters];

  const index = updatedFilters.indexOf(category);
  if (index > -1) {
    updatedFilters.splice(index, 1);
    setFilters(updatedFilters);
    return;
  }

  updatedFilters.push(category);
  setFilters(updatedFilters);
  
}, [filters]);

补充说明 #

不需要额外改用URLSearchParam，React Router的useSearchParams本身基于URLSearchParams封装，核心是要记住：所有对查询参数的修改，必须通过setSearchParams提交才会触发URL更新，直接操作searchParams对象不会生效。

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