React/Next.js中持久化与更新URL查询参数实现多条件筛选

import { useRouter, useSearchParams } from 'next/navigation';
import React, { useState, useEffect, useCallback } from 'react';

// ... (其他导入，如 XMarkIcon)

export default function Search({ search }) {
  const router = useRouter();
  const searchParams = useSearchParams(); // 获取当前的 URLSearchParams 对象

  // 从 URL 获取初始搜索值，确保在客户端渲染时获取最新值
  const initialSearch = searchParams.get('search') || '';
  const [searchQuery, setSearchQuery] = useState(initialSearch);

  // 使用 useEffect 同步内部状态与 URL，处理浏览器前进/后退等操作
  useEffect(() => {
    setSearchQuery(searchParams.get('search') || '');
  }, [searchParams]);

  /**
   * 更新 URL 查询参数的通用函数
   * @param {Object.<string, string|number|boolean|null|undefined>} newParams - 要添加或更新的参数对象
   */
  const updateQueryParams = useCallback((newParams) => {
    // 创建当前 URLSearchParams 对象的副本，以便修改
    const currentParams = new URLSearchParams(searchParams.toString());

    // 遍历新参数，更新或删除
    Object.keys(newParams).forEach(key => {
      const value = newParams[key];
      // 如果值为 null, undefined 或空字符串，则删除该参数
      if (value === null || value === undefined || value === '') {
        currentParams.delete(key);
      } else {
        // 否则设置或更新参数
        currentParams.set(key, String(value)); // 确保值为字符串
      }
    });

    // 构建新的查询字符串
    const queryString = currentParams.toString();
    // 根据是否有查询参数决定新路径
    const newPath = queryString ? `${router.pathname}?${queryString}` : router.pathname;

    router.push(newPath); // 执行路由跳转
  }, [router, searchParams]); // 依赖项：router 和 searchParams

  const handleInputChange = (e) => {
    setSearchQuery(e.target.value);
    // 实时更新 URL，但更推荐结合防抖处理文本输入
    updateQueryParams({ search: e.target.value });
  };

  const cleanSearch = (e) => {
    e.preventDefault();
    setSearchQuery("");
    updateQueryParams({ search: '' }); // 传入空字符串以删除 'search' 参数
  };

  return (
    <div className="relative">
      <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
        {/* 假设这里是搜索图标，例如 <svg>...</svg> */}
      </div>
      <input
        type="search"
        id="default-search"
        className="block w-full rounded-lg border border-slate-300 bg-slate-50 p-4 pl-10 text-sm placeholder-slate-400 focus:border-blue-500 focus:ring-blue-500"
        placeholder="Search AI tool or category"
        required
        value={searchQuery}
        onChange={handleInputChange}
      />
      {searchQuery && (
        <button
          type="button"
          onClick={cleanSearch}
          className="absolute inset-y-0 right-0 flex items-center pr-3"
        >
          {/* 假设这里是清除按钮图标，例如 <XMarkIcon className="h-5 w-5 text-slate-500" /> */}
        </button>
      )}
    </div>
  );
}

// Selector 组件示例（简化）
"use client";
import React, { useCallback } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';

export default function Selector({ label, data }) {
  const router = useRouter();
  const searchParams = useSearchParams();
  // 获取当前选中值，将 label 转换为小写作为参数名
  const paramName = label.toLowerCase();
  const currentSelection = searchParams.get(paramName) || '';

  const updateQueryParams = useCallback((newParams) => {
    const currentParams = new URLSearchParams(searchParams.toString());
    Object.keys(newParams).forEach(key => {
      const value = newParams[key];
      if (value === null || value === undefined || value === '') {
        currentParams.delete(key);
      } else {