本教程详细阐述如何在react/next.js应用中实现多条件数据筛选，确保在添加或更新新筛选条件时，能有效保留url中已有的查询参数。通过利用next.js路由的`router.query`对象或`usesearchparams`钩子，我们能够合并现有参数与新参数，从而构建一个动态且用户友好的过滤机制，避免旧筛选条件被意外清除。
问题背景：筛选器参数的覆盖问题
在构建基于React/Next.js的数据过滤功能时，一个常见挑战是当用户应用新的筛选条件时，URL中已存在的其他筛选条件会被意外覆盖。例如，如果URL是localhost:3000/?tag=food，当用户输入搜索词“text”时，如果直接使用router.push("/?search=text")，那么tag=food这个参数就会丢失，导致URL变为localhost:3000/?search=text。这显然不是我们期望的用户体验，用户希望能够同时应用多个筛选条件，如localhost:3000/?search=text&tag=food。
核心策略：合并现有与新增查询参数
解决此问题的关键在于，每次更新筛选条件时，不是简单地替换整个查询字符串，而是获取当前URL中所有的查询参数，然后将新的或更新的参数与之合并，最后再构建新的URL并进行跳转。Next.js的路由钩子提供了访问当前查询参数的能力，这使得实现这一策略变得直接。
步骤一：获取当前路由参数
对于Next.js的App Router（13+版本），useRouter钩子用于导航，而useSearchParams钩子则用于安全地访问客户端的URL查询参数。useSearchParams返回一个URLSearchParams对象，它提供了便捷的方法来操作查询字符串。
步骤二：合并新旧参数并构建新的查询字符串
在获得当前参数后，我们可以使用URLSearchParams对象的方法来添加、更新或删除参数。
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.} 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 (
{/* 假设这里是搜索图标，例如 */}
{searchQuery && (
)}
);
} 代码说明：
- useRouter 和 useSearchParams: useRouter用于执行页面导航，而useSearchParams则提供当前URL的查询参数，以URLSearchParams对象的形式。
- URLSearchParams API: 这是一个浏览器原生API，它提供了一种更健壮和标准化的方式来处理URL查询字符串。通过new URLSearchParams(searchParams.toString())，我们创建了当前查询参数的一个可修改副本。
-
updateQueryParams 函数:
- 它接收一个对象newParams，其中包含要添加或更新的查询参数。
- 它遍历newParams，根据值的类型决定是设置参数（currentParams.set(key, value)）还是删除参数（currentParams.delete(key)）。
- 如果value为null、undefined或空字符串''，则该参数会被删除，这对于清除筛选条件非常有用。
- 最后，它使用router.push()跳转到新的URL。
- useCallback: 将updateQueryParams包裹在useCallback中，可以优化性能，避免在每次组件渲染时都重新创建该函数。
- useEffect同步状态: useEffect用于在URL参数变化时（例如，用户通过浏览器前进/后退按钮改变了URL），同步组件内部的searchQuery状态，确保UI与URL保持一致。
过滤器组件的集成
其他过滤器组件（如Selector）也可以采用相同的updateQueryParams模式。当用户选择一个标签或价格范围时，只需调用updateQueryParams并传入相应的键值对即可。
// 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 { 
