React Router：如何通过路由正确处理查询参数？

嘿，我来帮你拆解下当前实现的问题，以及给出更靠谱的优化方案：

首先，你当前的处理方式存在几个明显的不合理之处：

1. 路由设计不符合URL规范 #

你把page=17&city_codes=2567这类查询字符串塞进了路由参数:query里，这其实违背了URL的标准用法——键值对形式的查询参数应该放在?后面（比如/lists?page=17&city_codes=2567）。这种设计会导致：

• URL可读性差，其他开发者一眼看不出这是查询参数
• 无法利用浏览器原生的查询参数处理能力，徒增开发成本
• 容易遇到编码/解码的潜在问题

2. 手动解析查询字符串风险高 #

你用正则替换清理字符+手动拆分&/=的方式，存在两个核心问题：

• 正则覆盖的危险字符不全，比如^、#、!等都没包含，万一参数里出现这类字符，很可能引发安全问题或解析错误
• 手动拆分逻辑鲁棒性差，比如如果参数值里意外包含&或=（虽然业务上可能不会有，但代码要考虑极端情况），直接拆分就会出错

第一步：修正路由配置（推荐） #

先把路由改成不包含:query参数的形式，让查询参数自然落在URL的查询字符串部分：

<Route path="/lists" component={Lists} />

对应的请求URL调整为：http://localhost:4567/lists?page=17&city_codes=2567

第二步：用原生API安全解析参数（类组件版本） #

在componentDidMount里，直接用浏览器原生的URLSearchParams来解析，这玩意儿专门处理查询字符串，安全又省心：

componentDidMount() {
  // 从location.search拿到带?的查询字符串，比如"?page=17&city_codes=2567"
  const searchParams = new URLSearchParams(this.props.location.search);
  
  // 单个参数获取
  const page = searchParams.get('page'); // 返回"17"，可以转成数字使用
  const cityCodes = searchParams.get('city_codes'); // 返回"2567"
  
  // 转成对象方便批量处理
  const queryObj = Object.fromEntries(searchParams.entries());
  // 得到 { page: "17", city_codes: "2567" }

  // 继续用你熟悉的_.pick过滤需要的参数
  const cleanQueryObj = _.pick(queryObj, ['page', 'city_codes']);
  
  // 接下来就可以用cleanQueryObj做业务逻辑啦
}

特殊情况：必须保留原URL格式（不推荐） #

如果因为历史遗留问题，不得不继续用/lists/page=17&city_codes=2567这种格式，那也别手动解析了，还是用URLSearchParams来处理：

componentDidMount() {
  const query = this.props.match.params.query;
  // 直接把路由参数传给URLSearchParams，它会自动处理拆分和解析
  const searchParams = new URLSearchParams(query);
  const queryObj = Object.fromEntries(searchParams.entries());
  
  const cleanQueryObj = _.pick(queryObj, ['page', 'city_codes']);
}

这种方式比你手动写正则和拆分逻辑靠谱多了，它会自动处理各种边缘情况，比如参数值的URL编码问题。

• 优先遵循URL规范，把查询参数放在?后面，修正路由是最优选择
• 放弃手动解析查询字符串，用原生的URLSearchParams API，既安全又高效
• 参数过滤可以继续用_.pick，确保只保留业务需要的字段

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