React中基于URL实现多条件叠加过滤的技术问询

这个需求在电商类应用里太常见了，我来给你一步步拆解实现方法，用 React Router 就能轻松搞定～

核心思路：利用 URLSearchParams 操作查询参数 #

React Router v6+ 提供了 useSearchParams 钩子，专门用来处理 URL 查询参数，它能帮我们自动完成参数的拼接、编码，完全不用手动拼字符串踩坑。

步骤1：引入并初始化钩子 #

首先在你的产品列表组件里引入 useSearchParams：

import { useSearchParams } from 'react-router-dom';

function ProductList() {
  // searchParams 是当前URL的查询参数对象，setSearchParams 用来更新参数
  const [searchParams, setSearchParams] = useSearchParams();
  
  // 后续逻辑写在这里...
}

步骤2：实现叠加参数的过滤函数 #

比如点击「Shirt」类型按钮时，我们要保留现有参数（比如已有的 category=Women），只新增/更新 type 参数：

// 处理类型过滤的函数
const handleFilterByType = (targetType) => {
  // 复制一份当前的查询参数，避免直接修改原对象
  const newParams = new URLSearchParams(searchParams);
  
  // 设置type参数：如果已有该参数就覆盖，没有就新增
  newParams.set('type', targetType);
  
  // 更新URL，自动保留其他现有参数
  setSearchParams(newParams);
};

// 处理品类过滤的函数逻辑完全一致
const handleFilterByCategory = (targetCategory) => {
  const newParams = new URLSearchParams(searchParams);
  newParams.set('category', targetCategory);
  setSearchParams(newParams);
};

步骤3：绑定按钮点击事件 #

把过滤函数绑定到对应的按钮上即可：

<div className="filter-buttons">
  <button onClick={() => handleFilterByType('shirt')}>Shirt</button>
  <button onClick={() => handleFilterByType('pants')}>Pants</button>
  <button onClick={() => handleFilterByCategory('Women')}>Women</button>
  <button onClick={() => handleFilterByCategory('Men')}>Men</button>
</div>

进阶：支持取消过滤（可选） #

如果需要点击同一个按钮切换「开启/关闭」过滤状态，可以加个判断：

const handleFilterByType = (targetType) => {
  const newParams = new URLSearchParams(searchParams);
  
  if (newParams.get('type') === targetType) {
    // 当前已经是该类型，移除这个过滤参数
    newParams.delete('type');
  } else {
    // 否则设置该参数
    newParams.set('type', targetType);
  }
  
  setSearchParams(newParams);
};

额外：高亮当前选中的过滤项 #

可以根据 searchParams 的值来给选中的按钮加样式，提升用户体验：

<button 
  onClick={() => handleFilterByType('shirt')}
  style={{ 
    backgroundColor: searchParams.get('type') === 'shirt' ? '#e0e0e0' : 'transparent',
    padding: '8px 16px',
    border: '1px solid #ccc',
    borderRadius: '4px',
    margin: '0 8px 8px 0'
  }}
>
  Shirt
</button>

兼容 React Router v5 的写法（如果还在用旧版本） #

如果你的项目还在使用 React Router v5，没有 useSearchParams，可以用 useLocation 和 useHistory 组合实现：

import { useLocation, useHistory } from 'react-router-dom';

function ProductList() {
  const location = useLocation();
  const history = useHistory();

  const handleFilterByType = (targetType) => {
    const searchParams = new URLSearchParams(location.search);
    searchParams.set('type', targetType);
    
    history.push({
      pathname: location.pathname,
      search: searchParams.toString()
    });
  };
  
  // ...其他逻辑
}

内容的提问来源于stack exchange，提问作者Pierre Olivier Tran