React Router v4如何拼接多个查询字符串？

嘿，我来帮你搞定这个问题！其实用你已经在使用的query-string库就能轻松实现多查询参数的拼接，方法超简单，下面给你详细拆解：

1. 直接生成包含多个参数的URL #

如果你要直接构造带多个参数的URL，只需要把所有参数放进一个对象里，传给queryString.stringify()方法就行：

import queryString from 'query-string';

// 定义你的多个查询参数
const queryParams = {
  sort: 'newest',
  page: 1
};

// 把对象转换成查询字符串
const searchStr = queryString.stringify(queryParams);
// 拼接成完整路径
const targetUrl = `${this.props.match.path}?${searchStr}`;
// 结果就是类似 /products?sort=newest&page=1 的URL

2. 在组件中通过history跳转时携带多参数 #

如果是要通过React Router的history对象跳转并带上多参数，直接在push/replace的配置里传入search字段即可：

// 在你的CategoriesChild组件的方法中（比如事件处理函数或者生命周期）
this.props.history.push({
  pathname: this.props.match.path, // 保持当前路径或者指定目标路径
  search: queryString.stringify({ sort: 'newest', page: 1 })
});

3. 基于现有查询参数更新/添加新参数 #

如果你需要保留当前URL已有的参数，只更新其中某几个或者添加新参数，可以先解析当前的查询字符串，再合并新参数：

// 解析当前URL的查询参数
const currentParams = queryString.parse(this.props.location.search);

// 合并新参数（比如保留现有sort，更新page为2）
const updatedParams = { ...currentParams, page: 2 };

// 更新URL
this.props.history.push({
  search: queryString.stringify(updatedParams)
});

4. 不用第三方库的原生方案（可选） #

如果你不想依赖query-string，可以用浏览器原生的URLSearchParams API：

const params = new URLSearchParams();
params.append('sort', 'newest');
params.append('page', 1);

this.props.history.push({
  pathname: this.props.match.path,
  search: params.toString()
});

之前你只能生成单个参数的URL，应该是每次只传了单个键值对的对象给stringify方法，现在只要把所有需要的参数都放进同一个对象里，就能生成包含多个参数的查询字符串啦～

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