在React/Next.js中实现持久化数据过滤：管理URL查询参数的最佳实践

// 错误的实现示例
import React, { useState } from "react";
import { useRouter } from "next/navigation"; // 假设使用Next.js App Router

export default function Search({ search }) {
  const [searchQuery, setSearchQuery] = useState(search);
  const router = useRouter();

  const handleInputChange = (e) => {
    setSearchQuery(e.target.value);
    // 问题所在：直接push一个新URL，只包含search参数，覆盖了所有其他参数
    router.push("/?search=" + e.target.value);
  };

  return (
    <input
      type="search"
      value={searchQuery}
      onChange={handleInputChange}
      placeholder="Search AI tool or category"
    />
  );
}

// utils/queryParams.js (或者直接在组件内部定义)
import { useRouter, useSearchParams, usePathname } from 'next/navigation';

/**
 * 更新URL的查询参数。
 * 该函数会读取当前URL的所有参数，与传入的新参数合并，然后更新URL。
 * @param {Object.<string, string|number|boolean|null|undefined>} newParams - 一个包含要添加、更新或删除的参数的对象。
 *                                                                        值为 null、undefined 或空字符串的参数将被删除。
 */
export const updateQueryParams = (newParams) => {
  // 获取路由实例、当前查询参数和当前路径名
  const router = useRouter();
  const searchParams = useSearchParams();
  const pathname = usePathname();

  // 基于当前查询参数创建一个新的 URLSearchParams 实例
  // 这样可以方便地进行参数的添加、修改和删除
  const currentSearchParams = new URLSearchParams(searchParams.toString());

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

  // 构建新的查询字符串
  const newQueryString = currentSearchParams.toString();

  // 构建完整的URL并进行跳转
  // 如果没有查询参数，则只push pathname
  router.push(`${pathname}${newQueryString ? `?${newQueryString}` : ''}`);
};

// components/common/Search.jsx
"use client"; // 标记为客户端组件

import React, { useState, useEffect } from "react";
import { XMarkIcon } from "@heroicons/react/24/outline";
import { useRouter, useSearchParams, usePathname } from 'next/navigation'; // 导入必要的hooks

export default function Search() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const pathname = usePathname();

  // 从URL中获取当前的搜索值
  const initialSearchQuery = searchParams.get('search') || '';
  const [searchQuery, setSearchQuery] = useState(initialSearchQuery);

  // 确保组件内部状态与URL参数同步
  useEffect(() => {
    setSearchQuery(searchParams.get('search') || '');
  }, [searchParams]);

  const updateQueryParams = (params) => {
    const currentSearchParams = new URLSearchParams(searchParams.toString());
    Object.entries(params).forEach(([key, value]) => {
      if (value === null || value === undefined || value === '') {
        currentSearchParams.delete(key);
      } else {
        currentSearchParams.set(key, String(value));
      }
    });
    const newQueryString = currentSearchParams.toString();
    router.push(`${pathname}${newQueryString ? `?${newQueryString}` : ''}`);
  };

  const handleInputChange = (e) => {
    const value = e.target.value;
    setSearchQuery(value);
    // 调用 updateQueryParams 来更新URL，保留其他参数
    updateQueryParams({ search: value });
  };

  const cleanSearch = (e) => {
    e.preventDefault();
    setSearchQuery("");
    // 清除搜索参数
    updateQueryParams({ search: '' });
  };

  return (
    <div className="relative">
      {/* ... 其他UI元素 ... */}
      <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"
        value={searchQuery}
        onChange={handleInputChange}
      />
      {searchQuery && (
        <button
          type="button"
          onClick={cleanSearch}
          className="absolute right-2.5 bottom-2.5 p-2"
        >
          <XMarkIcon className="h-5 w-5 text-slate-500" />
        </button>
      )}
    </div>
  );
}

// components/common/Selector.jsx
"use client";

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

export default function Selector({ label, data }) {
  const router = useRouter();
  const searchParams = useSearchParams();
  const pathname = usePathname();

  // 从URL中获取当前选择的值，假设参数名为小写的label，例如 'category' 或 'price'
  const paramKey = label.toLowerCase();
  const initialSelectedValue = searchParams.get(paramKey) || '';
  const [selectedValue, setSelectedValue] = useState(initialSelectedValue);

  // 确保组件内部状态与URL参数同步
  useEffect(() => {
    setSelectedValue(searchParams.get(paramKey) || '');
  }, [searchParams, paramKey]);

  const updateQueryParams = (params) => {
    const currentSearchParams = new URLSearchParams(searchParams.toString());
    Object.entries(params).forEach(([key, value]) => {
      if (value === null || value === undefined || value === '') {
        currentSearchParams.delete(key);
      } else {
        currentSearchParams.set(key, String(value));
      }
    });
    const newQueryString = currentSearchParams.toString();
    router.push(`${pathname}${newQueryString ? `?${newQueryString}` : ''}`);
  };

  const handleSelectChange = (e) => {
    const value = e.target.value;
    setSelectedValue(value);
    // 更新URL参数
    updateQueryParams({ [paramKey]: value });
  };

  return (
    <div>
      <label htmlFor={paramKey} className="sr-only">{label}</label>
      <select
        id={paramKey}
        value={selectedValue}
        onChange={handleSelectChange}
        className="block w-full rounded-lg border border-slate-300 bg-slate-50 p-4 text-sm focus:border-blue-500 focus:ring-blue-500"
      >
        <option value="">{`All ${label}`}</option>
        {data.map((item) => (
          <option key={item.value} value={item.value}>
            {item.label}
          </option>
        ))}
      </select>
    </div>
  );
}