反应路由器 v6 中的查询字符串答案

【问题标题】：query-string in react router v6反应路由器 v6 中的查询字符串
【发布时间】：2022-01-10 21:22:45
【问题描述】：

我在我的 URL 中显示两个查询字符串，例如 **localhost3000/?filter=all&search=something** 但问题是当没有任何搜索内容时，我的 URL 仍然显示 **localhost3000/?filter=all&search=** 虽然我想显示搜索是否使用并且没有搜索时显示**localhost3000/?filter=all** 这是我的代码：

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

replaceUrl 在过滤器更改或搜索内容时调用

【问题讨论】：

searchterm 未设置时的值是多少？也许是空字符串而不是undefined？请尝试将其设置为 undefined。

标签： javascript reactjs react-router query-string react-class-based-component

【解决方案1】：

如果this.state.searchterm 存在，只需设置search 字段

replaceUrl = () => {
    const x = {
      filter: this.state.filter,
    };

    if (this.state.searchterm) x.search = this.state.searchterm;

    const y = queryString.stringify(x);

    this.props.navigate(`?${y}`);
  };

【讨论】：

【解决方案2】：

由于您使用的是类组件，我假设您将其包装在函数组件中以将 navigate 函数注入道具中没有问题。 react-router-dom v6 有一个 useSearchParams 挂钩，专门用于处理 URL 查询字符串。

注意：

setSearchParams 函数的工作方式类似于 navigate，但仅适用于网址的search portion。

const [searchParams, setSearchParams] = useSearchParams();

将searchParams 和setSearchParams 传递给您的类组件并通过道具访问。

replaceUrl = () => {
  const { filter, searchterm } = this.state;
  const { searchParams, setSearchParams } = this.props;

  if (filter) {
    searchParams.set("filter", filter);
  }
  if (searchterm) {
    searchParams.set("search", searchterm);
  }

  setSearchParams(searchParams);
};

【讨论】：