Parámetros de consulta y filtros en la URL

Los parámetros de consulta aparecen después de ?. En /buscar?q=an, q guarda el texto de búsqueda. La ruta indica la pantalla y la consulta añade opciones como filtros, orden o paginación.

Esta práctica continúa con react-router y el BrowserRouter de src/main.tsx del tema anterior. Conserva ese archivo y sustituye src/App.tsx por:

1import { useEffect, useState, type FormEvent } from 'react';
2import { useSearchParams } from 'react-router';
3
4const names = ['Ana', 'Juan', 'Luis', 'Carlos', 'Andrés', 'Antonio'];
5
6export default function Ejem_22() {
7  const [searchParams, setSearchParams] = useSearchParams();
8  const qFromUrl = searchParams.get('q') ?? '';
9  const [search, setSearch] = useState(qFromUrl);
10
11  useEffect(() => {
12    setSearch(qFromUrl);
13  }, [qFromUrl]);
14
15  const query = qFromUrl.trim().toLowerCase();
16  const nombresFiltrados = names.filter((name) =>
17    name.toLowerCase().startsWith(query),
18  );
19
20  function handleSubmit(event: FormEvent<HTMLFormElement>) {
21    event.preventDefault();
22    const next = new URLSearchParams(searchParams);
23    const value = search.trim();
24    if (value) {
25      next.set('q', value);
26    } else {
27      next.delete('q');
28    }
29    setSearchParams(next);
30  }
31
32  return (
33    <>
34      <form onSubmit={handleSubmit}>
35        <label>
36          Buscar por nombre:
37          <input value={search} onChange={(event) => setSearch(event.target.value)} />
38        </label>
39        <button type="submit">Buscar</button>
40      </form>
41      <ul>
42        {nombresFiltrados.map((name) => <li key={name}>{name}</li>)}
43      </ul>
44      {nombresFiltrados.length === 0 && <p>No hay coincidencias.</p>}
45    </>
46  );
47}

Texto escrito y búsqueda aplicada #

search es el borrador del input. qFromUrl es la búsqueda aplicada. Al enviar, actualizamos la URL con el borrador y la lista se calcula a partir de la nueva consulta.

No guardamos los nombres filtrados en otro estado: se derivan del array y de la URL. startsWith('') es verdadero para cualquier cadena, así que una consulta vacía muestra todos los nombres.

El efecto sincroniza el borrador si la URL cambia, por ejemplo al usar Atrás o Adelante. Cambiar un parámetro mediante setSearchParams produce navegación.

Conservar otros filtros #

Creamos una copia con new URLSearchParams(searchParams) y cambiamos solo q. Así se conservan otros parámetros, como orden=asc. Pasar directamente { q: value } reemplazaría la consulta y podría eliminarlos.

get('q') devuelve una cadena o null; ?? '' convierte la ausencia en una cadena vacía. Actualiza los parámetros con setSearchParams: mutar el objeto por sí solo no actualiza la URL.

Prueba tú #

Busca an: deben aparecer Ana, Andrés y Antonio. Borra la búsqueda y envía para quitar q. Prueba Atrás y Adelante y comprueba que el campo y los resultados siguen la URL.

Consulta la referencia de useSearchParams.

Cuestionario del tema #

Abre el cuestionario en las actividades de este tema para comprobar lo aprendido. Cada respuesta incluye una explicación.