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