MERN栈页面刷新后URL筛选参数重置为初始值的问题

问题根源是页面刷新时Redux状态会回到初始值，没有从URL中读取已有的筛选参数同步到状态里。解决核心是页面初始化时解析URL查询参数，将参数同步到Redux状态和组件本地状态，具体实现步骤如下：

1. 编写URL参数解析函数 #

用来从当前URL中提取并转换筛选参数，处理参数默认值和数据类型（比如页码转数字）：

const parseQueryParams = () => {
  const params = new URLSearchParams(window.location.search);
  return {
    page: params.get('page') ? parseInt(params.get('page'), 10) : 1,
    sort: params.get('sort') || 'latest',
    localValue: params.get('search') || '',
    colorFilter: params.get('color') ? `#${params.get('color')}` : '#000000', // 匹配你的默认颜色
    categoryFilter: params.get('category') || 'all' // 匹配你的默认分类
  };
};

2. 在ProductPage组件中添加初始化逻辑 #

页面挂载时调用解析函数，将参数同步到Redux状态和本地搜索状态：

// 先确保你的product slice中定义了更新这些状态的action
useEffect(() => {
  const initialParams = parseQueryParams();
  // 更新Redux状态
  dispatch(setPage(initialParams.page));
  dispatch(setSort(initialParams.sort));
  dispatch(setColorFilter(initialParams.colorFilter));
  dispatch(setCategoryFilter(initialParams.categoryFilter));
  // 更新本地搜索状态
  setLocalSearch(initialParams.localValue);
}, [dispatch]);

3. 完善Redux Slice的状态更新Action #

在你的getProductSlice中添加对应的reducer，用来更新筛选参数状态：

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

const productSlice = createSlice({
  name: 'product',
  initialState: {
    page: 1,
    sort: 'latest',
    colorFilter: '#000000',
    categoryFilter: 'all',
    // 其他原有状态...
    products: [],
    isLoading: false,
    // ...
  },
  reducers: {
    setPage: (state, action) => {
      state.page = action.payload;
    },
    setSort: (state, action) => {
      state.sort = action.payload;
    },
    setColorFilter: (state, action) => {
      state.colorFilter = action.payload;
    },
    setCategoryFilter: (state, action) => {
      state.categoryFilter = action.payload;
    },
    // 其他原有reducer...
  },
  // 原有extraReducers逻辑...
});

// 导出这些action供组件调用
export const { setPage, setSort, setColorFilter, setCategoryFilter } = productSlice.actions;
export default productSlice.reducer;

4. 调整URL同步逻辑（可选，匹配你想要的URL格式） #

如果你希望URL参数和示例http://localhost:3000/products?color=0000&sort=latest&category=man一致，需要修改原有的URL同步代码，避免将带#的colorFilter直接放到URL里：

useEffect(() => {
  const queryParams = {};
  if (page !== 1) queryParams.page = page;
  if (sort !== 'latest') queryParams.sort = sort;
  if (localValue) queryParams.search = localValue;
  if (colorFilter !== '#000000') queryParams.color = colorFilter.substring(1);
  if (categoryFilter !== 'all') queryParams.category = categoryFilter;

  const searchParams = new URLSearchParams(queryParams);
  const queryString = searchParams.toString();

  window.history.replaceState(null, null, `/products${queryString ? `?${queryString}` : ''}`);

  dispatch(getProducts({
    page,
    sort,
    localValue,
    colorFilter,
    categoryFilter
  }));
}, [dispatch, page, sort, localValue, colorFilter, categoryFilter]);

这样调整后，默认参数不会出现在URL中，使URL更简洁，同时刷新页面时能正确解析参数并恢复状态。

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