CODEWITHSUNDEEP
javascriptreactjsreact-routerquery-stringreact-class-based-component
hossein fti
hossein fti

Reputation: 1680

query-string in react router v6

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

Upvotes: 1

Views: 847

Answers (2)

Drew Reese
Drew Reese

Reputation: 202667

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

Upvotes: 0

user10454516
user10454516

Reputation: 1143

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

Upvotes: 1

Related Questions