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
– fast-reflexes, Commented Dec 5, 2021 at 8:09

user10454516 · Accepted Answer · 2021-12-05 13:33:17Z

1

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

answered Dec 5, 2021 at 13:33

user10454516

1,1534 gold badges23 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Drew Reese · Accepted Answer · 2022-02-02 10:27:41Z

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

Collectives™ on Stack Overflow

query-string in react router v6

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related