React中基于输入动态构建URL并实现实时筛选的方案咨询

刚好之前做过类似的需求，结合React Router和Redux来实现实时筛选+URL同步其实挺清晰的，我给你拆解下步骤和代码示例：

为什么选URL？因为它是天然的状态载体——刷新页面、分享链接时筛选条件不会丢失，比只存在Redux里更可靠。我们要实现的闭环是：用户操作筛选控件 → 更新URL参数 → 监听URL变化同步到Redux → 列表组件用Redux状态过滤数据。

React Router v6提供了useSearchParams钩子，用法和useState类似，专门用来便捷处理URL查询参数。

下面是带注释的组件代码，适配你的三个筛选控件：

import { useSearchParams } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { updateFilters } from './store/filtersSlice'; // 你的Redux切片路径
import { DatePicker } from 'antd'; // 以antd日期选择器为例，可替换为你用的组件

export default function FilterBar() {
  // 获取当前URL查询参数，以及更新参数的方法
  const [searchParams, setSearchParams] = useSearchParams();
  const dispatch = useDispatch();
  // 从Redux获取当前筛选状态，用来给控件赋值
  const currentFilters = useSelector(state => state.filters);

  // 初始化逻辑：组件挂载时，把URL里的参数同步到Redux
  useEffect(() => {
    const filter = searchParams.get('filter') || '';
    const category = searchParams.get('category') || '';
    const dates = searchParams.get('dates') || '';
    dispatch(updateFilters({ filter, category, dates }));
  }, [searchParams, dispatch]);

  // 处理条目名称输入框变化
  const handleFilterChange = (e) => {
    const newFilter = e.target.value.trim();
    // 复制当前查询参数，避免直接修改原对象
    const newParams = new URLSearchParams(searchParams);
    // 设置filter参数，空值也保留（符合你要的?filter=&category=...格式）
    newParams.set('filter', newFilter);
    // 更新URL，React Router会自动处理，不会触发页面刷新
    setSearchParams(newParams);
  };

  // 处理分类下拉框变化
  const handleCategoryChange = (e) => {
    const newCategory = e.target.value;
    const newParams = new URLSearchParams(searchParams);
    newParams.set('category', newCategory);
    setSearchParams(newParams);
  };

  // 处理日期范围选择器变化
  const handleDateChange = (dates, dateStrings) => {
    // 将日期数组转成字符串存入URL，比如'2024-01-01,2024-01-31'
    const datesStr = dates ? dateStrings.join(',') : '';
    const newParams = new URLSearchParams(searchParams);
    newParams.set('dates', datesStr);
    setSearchParams(newParams);
  };

  return (
    <div className="filter-bar">
      <input
        type="text"
        placeholder="条目名称"
        value={currentFilters.filter}
        onChange={handleFilterChange}
      />
      <select
        value={currentFilters.category}
        onChange={handleCategoryChange}
      >
        <option value="">所有分类</option>
        <option value="article">文章</option>
        <option value="video">视频</option>
      </select>
      <DatePicker.RangePicker
        onChange={handleDateChange}
        // 把Redux里的日期值转回组件需要的格式
        defaultValue={currentFilters.dates ? currentFilters.dates.split(',').map(date => new Date(date)) : []}
      />
    </div>
  );
}

需要一个Redux切片来存储筛选状态，方便列表组件获取和使用：

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  filter: '',
  category: '',
  dates: ''
};

const filtersSlice = createSlice({
  name: 'filters',
  initialState,
  reducers: {
    updateFilters: (state, action) => {
      // 直接解构赋值更新状态，Redux Toolkit自动处理immutable
      Object.assign(state, action.payload);
    }
  }
});

export const { updateFilters } = filtersSlice.actions;
export default filtersSlice.reducer;

列表组件监听Redux里的筛选状态，用useMemo做性能优化，避免每次渲染都重新过滤：

import { useSelector } from 'react-redux';
import { useMemo } from 'react';

export default function ItemList() {
  const allItems = useSelector(state => state.items);
  const filters = useSelector(state => state.filters);

  // 实时过滤数据，仅当items或filters变化时重新计算
  const filteredItems = useMemo(() => {
    return allItems.filter(item => {
      // 模糊匹配条目名称（忽略大小写）
      const matchesFilter = item.name.toLowerCase().includes(filters.filter.toLowerCase());
      // 分类匹配：空值则不筛选
      const matchesCategory = !filters.category || item.category === filters.category;
      // 日期匹配：根据你的数据格式调整逻辑
      const matchesDates = !filters.dates || (() => {
        const [startDate, endDate] = filters.dates.split(',');
        return item.createTime >= startDate && item.createTime <= endDate;
      })();

      return matchesFilter && matchesCategory && matchesDates;
    });
  }, [allItems, filters]);

  return (
    <ul className="item-list">
      {filteredItems.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

v5没有useSearchParams，可以用useLocation和useHistory替代，核心逻辑不变：

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

// 在组件内定义更新参数的方法
const location = useLocation();
const history = useHistory();

const updateSearchParams = (key, value) => {
  const searchParams = new URLSearchParams(location.search);
  searchParams.set(key, value);
  history.push({
    pathname: location.pathname,
    search: searchParams.toString()
  });
};

// 然后在onChange事件里调用：
handleFilterChange = (e) => {
  updateSearchParams('filter', e.target.value);
};

• 空值处理：用set方法设置空字符串，URL里会保留filter=这样的格式，完全符合你的需求；如果不想保留空参数，可以改用delete方法。
• 性能优化：列表组件用useMemo缓存过滤结果，避免不必要的重渲染。
• 状态一致性：我们采用URL驱动Redux状态的方式，保证URL和筛选状态始终同步，刷新页面也能恢复之前的筛选条件。

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