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

Posted 2023-03-16

【中文标题】反应路由器 v6 中的查询字符串

【英文标题】：query-string in react router 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。

【参考方案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);
;