query-string in react router v6

Question

I show two query strings in my URL like this **localhost3000/?filter=all&search=something** but the problem is when there isn't anything for search my URL still shows **localhost3000/?filter=all&search=** while I want to show search if it uses and when there is no search it shows **localhost3000/?filter=all** this is my code:

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

replaceUrl calls when filter changes or something search

What's the value of `searchterm` when it's not set? Maybe it is the empty string instead of `undefined`? Try setting it to `undefined` instead. — fast-reflexes, Dec 05 '21 at 08:09

score 1 · Accepted Answer · answered Dec 05 '21 at 13:33

Just set the search field if the this.state.searchterm exist

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

score 0 · Answer 2 · answered Feb 02 '22 at 10:27

Since you are using a class component I'll assume you had no issue wrapping it in a function component to inject the navigate function into props. react-router-dom v6 has a useSearchParams hook specifically for working with the URL queryString.

Note:

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

const [searchParams, setSearchParams] = useSearchParams();

Pass searchParams and setSearchParams along to your class component and access via 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);
};

query-string in react router v6

2 Answers2