React 路由器 v6 中的查询字符串

Question

我在 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 在过滤器更改或搜索时调用

Answer 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}`);
  };

Answer 2

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

Note:

The setSearchParams function works like navigate, but only for the search portion of the URL.

const [searchParams, setSearchParams] = useSearchParams();

将 searchParams 和 setSearchParams 传递给您的 class 组件并通过 props 访问。

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);
};

React 路由器 v6 中的查询字符串

query-string in react router v6

javascript

query-string

reactjs

react-router

react-class-based-component