Muestro dos cadenas de consulta en mi URL como esta **localhost3000/?filter=all&search=something** pero el problema es que cuando no hay nada para buscar, mi URL todavía muestra **localhost3000/?filter=all&search=** mientras Quiero mostrar la búsqueda si usa y cuando no hay búsqueda muestra **localhost3000/?filter=all** este es mi código:
replaceUrl = () => { const x = { filter: this.state.filter, search: this.state.searchterm, }; const y = queryString.stringify(x); this.props.navigate(`?${y}`); }; replaceUrl llama cuando cambia el filtro o algo busca
Simplemente configure el campo de search si existe this.state.searchterm
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}`); };Dado que está utilizando un componente de clase, supondré que no tuvo problemas para envolverlo en un componente de función para inyectar la función de navigate en accesorios. react-router-dom v6 tiene un useSearchParams específicamente para trabajar con la URL queryString.
Nota:
La función
setSearchParamsfunciona como navegar , pero solo para la parte de búsqueda de la URL.
const [searchParams, setSearchParams] = useSearchParams(); Pase searchParams y setSearchParams a su componente de clase y acceda a través de accesorios.
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); };