Sincroniza filtros con la URL usando useSearchParams

Cuando construyes una página de búsqueda con React Router, quieres que los filtros vivan en la URL y que el usuario pueda modificarlos desde la interfaz. Aquí aprenderás a sincronizar inputs y selects con query params usando el hook useSearchParams, para que el estado visual y la navegación siempre estén conectados.

Esto le sirve a cualquier desarrollador front-end que trabaje con React y necesite filtros compartibles, persistentes y navegables directamente desde el enlace.

¿Por qué conectar los filtros con la URL?

En la clase anterior ya podíamos leer filtros desde la URL. El problema es que leer no es suficiente: el usuario necesita poder modificar esos filtros desde la interfaz y que ese cambio se refleje en los query params.

La idea central es que el estado de búsqueda deje de vivir dentro de un useState aislado y pase a vivir en la navegación [00:15]. Así, si compartes la URL, la persona que la abra verá exactamente los mismos resultados filtrados.

¿Qué es un query param? Es un valor que viaja en la URL después del signo ?, como ?destination=Medellin&type=casa. Sirve para guardar el estado de una búsqueda directamente en el enlace.

¿Cómo crear el componente SearchFilters?

El primer paso es crear una carpeta Search dentro de tus componentes y, adentro, un archivo searchFilters.tsx [00:38]. Este archivo concentra toda la lógica visual del filtro.

El componente recibe estas props, todas tipadas con SearchFilterProps:

• destination: el valor del destino que se está buscando.
• type: el tipo de propiedad seleccionado.
• onChange: función que se dispara cuando cambia un valor.
• onClear: función que se dispara al limpiar los filtros.

Dentro tiene una section llamada Filters con tres piezas clave: un input ancho para el destino, un select para el tipo de propiedad y un botón para limpiar [01:20].

¿Qué opciones tiene el select de tipo de propiedad?

El select usa un evento onChange que dispara el cambio del valor en type. Sus opciones reflejan el contenido que existe hasta ahora en la aplicación:

1. Todos, que limpia el filtro.
2. Apartamento.
3. Casa.
4. Loft.
5. Cabaña.
6. Estudio.
7. Villa.

El botón, por su parte, ejecuta onClear en su evento de clic para regresar todo al estado inicial vacío [02:05].

¿Cómo conectar SearchFilters con la página de búsqueda?

De vuelta en la página de búsqueda, hay un pequeño ajuste: como solo queda un main, puedes eliminar el fragment y la página se seguirá renderizando sin problema [02:38].

Luego reemplazas el bloque estático que mostraba "destino todos" y "tipo todos" por el nuevo componente SearchFilters. Al usarlo, el editor te sugiere un contenido inicial: acéptalo con funciones vacías para onChange y onClear, y con destination y type ya definidos [03:10].

¿Cómo funciona la función handleFilterChange?

Aquí está el corazón de la sincronización. La función handleFilterChange recibe una key y un value tipados con TypeScript [03:45]. Su lógica es directa:

• Lee el estado inicial con searchParams.
• Si el valor existe, lo setea en la URL.
• Si no existe, lo elimina de los query params.

Y aquí viene lo interesante. En la clase pasada, useSearchParams se parecía a un useState sin la función de set. Ahora sí usamos esa parte: setSearchParams es lo que permite que el usuario cambie los parámetros y los guarde en la navegación [04:20].

¿Para qué sirve setSearchParams? Es la función que actualiza los query params de la URL. Funciona como el set de un useState, pero en lugar de guardar en memoria, escribe directamente en la navegación del navegador.

Esta función se conecta al onChange. Para el onClear, basta con pasarle un objeto vacío a setSearchParams y así se limpian todos los filtros de una sola vez [04:50].

¿Cómo se comporta el filtro en la interfaz?

Con todo conectado, la página de búsqueda muestra el input, el select y el botón de limpiar filtros arriba de los resultados [05:15]. Sin ningún filtro activo, lista todas las propiedades sin cambios.

Al escribir "Medellín" en el input, el onChange activa de inmediato el query param destination=Medellín. Si eliges "casa" en el select, dispara type=casa. Y aquí está lo potente: los filtros se concatenan [06:10].

Por ejemplo, si buscas Santiago y filtras por apartamento, la interfaz hace un doble match y muestra ambas coincidencias. Todo lo que en la clase anterior solo funcionaba desde la URL, ahora se construye con interacciones directas en la pantalla.

¿Cómo se combinan varios filtros en la URL? Cada filtro agrega su propio query param separado por &, como ?destination=Santiago&type=apartamento. React Router los lee juntos y filtra por ambos a la vez.

El botón de limpiar filtros ya es funcional, solo faltaba el estilo. Los estilos se agregan en el archivo index.css, donde vive toda la apariencia de la aplicación, para mantener armonía visual [07:00].

Con esto, el estado de búsqueda ahora vive en la navegación. ¿Te animas a probarlo agregando un tercer filtro propio? Cuéntame en los comentarios qué combinación se te ocurre.