Query params para búsqueda en React

Cuando buscas en una app como Platzi Host, los filtros quedan reflejados en la URL gracias a los query params. Aquí aprendes a leer esos parámetros con el hook useSearchParams de React Router para filtrar propiedades por destino, tipo de alojamiento y número de huéspedes. Es ideal si construyes buscadores en React.

Por qué conviene guardar los filtros en la URL

Guardar los filtros en la URL tiene ventajas muy concretas para el usuario. No es un capricho técnico, resuelve problemas reales de navegación.

• Puedes compartir una búsqueda tal cual la hiciste.
• Puedes refrescar la página sin perder los filtros aplicados.
• Puedes volver con el botón de atrás del navegador y conservar el estado.

En la clase se representan cuatro cosas en la URL: el destino, el tipo de alojamiento, los huéspedes y el rango de precios [00:12]. Una búsqueda típica sería destino Santiago, tipo apartamento y dos guests [01:03].

¿Qué son los query params? Son los pares clave-valor que aparecen en la URL después del signo de interrogación, por ejemplo ?destination=Santiago&type=apartamento. Sirven para pasar información de filtros o búsquedas entre páginas.

Cómo usar el hook useSearchParams de React Router

Antes de filtrar, hay que corregir un detalle: en el search page se estaba importando el header que ya no se necesita, porque el layout lo maneja [00:39]. Al borrarlo, la página vuelve a funcionar.

El protagonista es useSearchParams, el hook que ofrece React Router para ubicarte en la pantalla y traer todos los parámetros de la URL [02:16].

En qué se parece useSearchParams a useState

Su estructura recuerda a useState, pero con una diferencia importante. Solo tiene una función de lectura de este lado, no un set de función [02:39].

¿La razón? No modifica un estado interno: consume la data directamente desde la URL. Piénsalo como una ventana de solo lectura hacia lo que ya está escrito en la barra de direcciones.

¿Para qué sirve useSearchParams? Para leer los parámetros de la URL dentro de un componente de React Router. Con searchParams.get("destination") obtienes el valor de ese filtro sin manejar estado manual.

Cómo leer y mostrar los parámetros de la URL

Antes de construir el filtro, hay que definir por cuáles parámetros vas a filtrar. En la clase se crean dos constantes: destino y tipo [03:50].

Se usa la función get de searchParams para leer cada valor, y si no existe, se define como una string vacía. Así evitas errores cuando la URL no trae ese filtro.

jsx import { useSearchParams } from "react-router-dom";

const [searchParams] = useSearchParams(); const destination = searchParams.get("destination") || ""; const type = searchParams.get("type") || "";

Estos valores se muestran directamente en la interfaz, debajo del texto de resultados de búsqueda. Si cambias apartamento por casa en la URL y refrescas, el tipo cambia a casa y el destino se mantiene en Santiago hasta que lo edites por Medellín [05:16]. Hay un pequeño delay mientras responde el hook de React Router.

Cómo filtrar propiedades según los query params

Con el destino y el tipo definidos, llega la función de filtrado. Se llama filteredProperties y recibe toda la data de propiedades para revisar una por una [06:14].

La lógica se apoya en dos comparaciones:

• matchDestination toma la ubicación de la property, la pasa a minúscula y valida que incluya lo que llega en destination.
• matchTypes hace lo mismo con el type, y si no viene ningún valor, devuelve true.

jsx const filteredProperties = properties.filter((property) => { const matchDestination = property.location .toLowerCase() .includes(destination.toLowerCase()); const matchTypes = type ? property.type.toLowerCase().includes(type.toLowerCase()) : true; return matchDestination && matchTypes; });

Aquí viene lo interesante: pasar a minúsculas ambos lados evita que Santiago y santiago se traten como cosas distintas. Luego usas filteredProperties en lugar de properties dentro del componente PropertyList [07:03].

Cómo validar que el filtro funciona de verdad

Al probar con Santiago y apartamento, aparece el resultado que hace match con esa combinación [07:32]. Si solo filtras por destino Santiago, el tipo queda en "todos", tal como indica el código.

Para comprobarlo con más casos, en la clase se cambia el location de dos o más propiedades para que varias coincidan [08:20]. Al buscar solo Santiago aparecen tres propiedades; al buscar Bogotá, ninguna hace match.

El filtro puede usar tres parámetros o uno solo. Esa flexibilidad es clave: no obligas al usuario a llenar todos los campos para obtener resultados.

El siguiente paso es conectar estos parámetros con el buscador del home, para que la interfaz mande el filtro a la URL y el query param no se tenga que escribir a mano. ¿Ya intentaste implementar tu propio filtro con useSearchParams? Cuéntanos en los comentarios cómo te fue.