React MERN栈构建URL查询参数及实现URL驱动筛选的方法

1. 同步筛选状态到URL查询参数 #

将Redux中存储的筛选参数（页码、排序规则、颜色、分类、搜索词）同步到地址栏URL，使用React Router v6的useSearchParams实现：

在产品列表组件中监听Redux筛选状态变化，状态更新时自动修改地址栏查询参数：

import { useSearchParams } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import { useEffect } from 'react';
import { setFilters } from './productSlice';

function Products() {
  const [searchParams, setSearchParams] = useSearchParams();
  const dispatch = useDispatch();
  // 从Redux获取当前筛选状态
  const { page, sort, localValue, colorFilter, categoryFilter } = useSelector(state => state.product);

  // 筛选状态变更时同步到URL
  useEffect(() => {
    const params = new URLSearchParams();
    params.set('page', page.toString());
    params.set('sort', sort);
    if (colorFilter) params.set('color', colorFilter.substring(1)); // 移除颜色值的#前缀
    if (categoryFilter) params.set('category', categoryFilter);
    if (localValue) params.set('search', localValue);
    
    setSearchParams(params);
  }, [page, sort, localValue, colorFilter, categoryFilter, setSearchParams]);

  // 筛选操作回调（比如用户选择颜色/分类后触发）
  const handleFilterUpdate = (newFilters) => {
    // 更新Redux状态，后续自动同步到URL
    dispatch(setFilters(newFilters));
  };

  return (
    // 渲染筛选组件与产品列表
  );
}

2. 页面加载时从URL读取参数并应用筛选 #

用户直接访问带查询参数的URL时，解析参数同步到Redux并触发产品请求：

// 在Products组件中添加以下代码
useEffect(() => {
  // 从URL提取参数
  const page = parseInt(searchParams.get('page')) || 1;
  const sort = searchParams.get('sort') || 'latest';
  const color = searchParams.get('color');
  const colorFilter = color ? `#${color}` : ''; // 给颜色值添加#前缀，匹配Redux存储格式
  const categoryFilter = searchParams.get('category') || '';
  const localValue = searchParams.get('search') || '';

  // 更新Redux筛选状态
  dispatch(setFilters({ page, sort, colorFilter, categoryFilter, localValue }));
  // 发起产品查询请求
  dispatch(getProducts({ page, sort, localValue, colorFilter, categoryFilter }));
}, [searchParams, dispatch]);

3. 优化接口URL构建（避免手动拼接错误） #

将原thunk中手动拼接URL的逻辑替换为URLSearchParams，提升安全性与可维护性：

export const getProducts = createAsyncThunk(
  'product/get',
  async ({ page, sort, localValue, colorFilter, categoryFilter }, thunkAPI) => {
    const params = new URLSearchParams();
    params.set('page', page.toString());
    params.set('sort', sort);
    
    if (colorFilter) {
      const colorStr = colorFilter.substring(1);
      params.set('color', colorStr);
    }
    if (categoryFilter) {
      params.set('cat', categoryFilter); // 需与后端接口参数名保持一致（原代码使用cat）
    }
    if (localValue) {
      params.set('search', localValue);
    }

    const url = `/api/v1/products?${params.toString()}`;

    try {
      const { data } = await axios.get(url);
      return data;
    } catch (error) {
      const message = error.response.data.msg;
      return thunkAPI.rejectWithValue(message);
    }
  }
);

4. 在Redux Slice中添加筛选状态更新Reducer #

在product slice中新增setFilters action，用于更新筛选参数状态：

import { createSlice } from '@reduxjs/toolkit';
import { getProducts } from './getProductsThunk';

const initialState = {
  products: [],
  page: 1,
  sort: 'latest',
  localValue: '',
  colorFilter: '',
  categoryFilter: '',
  loading: false,
  error: ''
};

const productSlice = createSlice({
  name: 'product',
  initialState,
  reducers: {
    setFilters: (state, action) => {
      // 合并新筛选参数，保留未传入的原有值
      state.page = action.payload.page ?? state.page;
      state.sort = action.payload.sort ?? state.sort;
      state.localValue = action.payload.localValue ?? state.localValue;
      state.colorFilter = action.payload.colorFilter ?? state.colorFilter;
      state.categoryFilter = action.payload.categoryFilter ?? state.categoryFilter;
    }
  },
  extraReducers: (builder) => {
    builder
      .addCase(getProducts.pending, (state) => {
        state.loading = true;
        state.error = '';
      })
      .addCase(getProducts.fulfilled, (state, action) => {
        state.loading = false;
        state.products = action.payload;
      })
      .addCase(getProducts.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload;
      });
  }
});

export const { setFilters } = productSlice.actions;
export default productSlice.reducer;

关键注意事项 #

• 参数名统一：前端URL展示的参数名（如category）需与后端接口接收的参数名（如原代码的cat）对应，有差异时需在thunk中转换。
• 类型处理：从URL读取的页码是字符串，需转换为数字后再传入请求。
• 默认值：当URL缺少某个参数时，设置合理默认值（如排序默认latest、页码默认1）。

内容的提问来源于stack exchange，提问作者Uros Dioda Rakic