React Router v6使用query-string如何过滤空的URL查询参数

方案1：手动过滤空参数（兼容所有query-string版本） #

构造查询参数对象时直接剔除空值的search字段，代码修改如下：

replaceUrl = () => {
  const queryParams = {
    filter: this.state.filter,
    // 仅当搜索内容非空时才加入search参数
    ...(this.state.searchterm.trim() && { search: this.state.searchterm })
  };
  const queryStr = queryString.stringify(queryParams);
  this.props.navigate(`?${queryStr}`);
};

方案2：使用query-string内置配置（推荐，query-string v6.0+支持） #

不用手动修改参数对象，直接在stringify时添加skipEmptyStrings配置，自动跳过空字符串参数：

replaceUrl = () => {
  const x = {
    filter: this.state.filter,
    search: this.state.searchterm,
  };
  const queryStr = queryString.stringify(x, { skipEmptyStrings: true });
  this.props.navigate(`?${queryStr}`);
};

如果需要同时过滤null/undefined参数，可以额外添加skipNull: true配置。

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