es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

cadena de consulta en react router v6

12 Jul, 2023 Programación

Muestro dos cadenas de consulta en mi URL como esto **localhost3000/?filter=all&search=something**
pero el problema es cuando no hay nada para buscar, mi URL aún muestra **localhost3000/?filter=all&search=**
mientras que quiero mostrar la búsqueda si se utiliza 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(<code>?${y}</code>);
  };

replaceUrl se llama cuando el filtro cambia o algo de búsqueda.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    cambios relacionados. Toma el nuevo filtro y término de búsqueda del estado y utiliza la biblioteca queryString para crear una nueva cadena de consulta.

    Para resolver el problema de mostrar “buscar” incluso cuando el término de búsqueda está vacío, podemos modificar la función replaceUrl para verificar si el término de búsqueda está vacío antes de agregarlo a la cadena de consulta. Así es como se vería el código actualizado:

    replaceUrl = () => {
  const { filter, searchterm } = this.state;
  let query = { filter };

  if (searchterm) {
    query.search = searchterm;
  }

  const queryString = qs.stringify(query);
  this.props.navigate(`?${queryString}`);
};

    Primero destructuramos el filter y searchterm del estado. Luego creamos un nuevo objeto query con solo el atributo filter.

    Luego verificamos si searchterm es verdadero, es decir, si tiene un valor. Si es así, lo agregamos como un atributo al objeto query.

    Finalmente, utilizamos la biblioteca qs para convertir el objeto query en una cadena de consulta y navegar hacia la nueva URL.

    Con este cambio, cuando no hay un valor para searchterm, no se incluirá en la cadena de consulta y la URL solo mostrará localhost3000/?filter=all.

Comments are closed.