React中使用react-router-dom如何不刷新页面为URL添加筛选参数

核心原因 #

你遇到的刷新问题主要来自两个层面：

1. 直接调用原生window.historyAPI修改路由，会脱离react-router的状态管控，触发路由重新匹配，严重情况下会导致组件重渲染甚至页面刷新
2. 路由配置的冗余规则、筛选参数的URL拼接逻辑有缺陷，可能导致路径匹配失败触发全局重定向，表现为页面刷新

修复步骤 #

1. 统一使用react-router提供的路由操作API #

不要直接调用原生history API，你已经通过useHistory获取了路由实例，直接使用history.push或者history.replace即可，这两个API是react-router基于原生history封装的，默认不会触发页面刷新，只会触发内部路由状态更新。

2. 删除路由配置冗余规则 #

你当前/search/*路由下的重定向规则和上层路由路径完全重复，不会生效反而可能干扰匹配，直接删除即可：

{
  path: "/search/*",
  layout: NifsyLayout,
  routes: [
    {
      exact: true,
      path: "/search/*",
      component: lazy(() => import("./pages/Shop")),
    }
    // 移除下方冗余的重定向规则
    // {
    //   path: "/search/*",
    //   exact: true,
    //   component: () => <Redirect to={ACCOUNT_URL} />,
    // },
  ],
}

3. 修正URL拼接逻辑，避免路径匹配失败 #

你当前拼接品牌、合集参数时没有添加路径分隔符，会导致路径异常，比如筛选category=clothes、brands=["nike","adidas"]时，最终路径会变成/search/clothesnikeadidas，不符合预期也容易匹配到全局重定向规则，建议统一添加分隔符，同时对特殊字符做编码处理：

let url = "/search";
if (filter.category) url += `/${filter.category}`;
if (filter.brands?.length) {
  url += `/brand-${filter.brands.join('-')}`;
}
if (filter.collections?.length) {
  url += `/collection-${filter.collections.join('-')}`;
}
// query参数添加编码处理，避免特殊字符导致路由解析异常
url += `?q=${encodeURIComponent(filter.keyword || '')}`;
url += `&start=${filter.start}`;
url += `&size=${filter.size}`;
url += `&sortby=${filter.sort}`;
const filterStr = typeof filter.filters == "string" ? filter.filters : JSON.stringify(filter.filters);
url += `&filter=${encodeURIComponent(filterStr)}`;

// 直接调用history.push即可，不会触发页面刷新
history.push(url);

4. 配置Shop组件监听路由变化，避免不必要的重渲染 #

如果需要手动控制筛选逻辑，不用每次路由变化都重新拉取全量数据，可以在Shop组件中监听location变化，只处理筛选参数的更新即可：

import { useLocation } from 'react-router-dom'
import { useEffect } from 'react'

const Shop = () => {
  const location = useLocation()
  useEffect(() => {
    // 路由变化时只解析更新筛选参数，不需要重新初始化组件
    const query = new URLSearchParams(location.search)
    // 解析pathname中的分类、品牌、合集参数，更新本地筛选状态
  }, [location.pathname, location.search])

  // 其余组件逻辑保持不变
}

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