Gestionar el estado en los parámetros de búsqueda de la URL
Sincronice los filtros, el orden y la paginación con la URL mediante useSearchParams.
Gestionar el estado en los parámetros de búsqueda de la URL es una lección gratuita de React Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.
¿Por qué guardar el estado en la URL?
Los filtros, las consultas de búsqueda, los criterios de ordenación y la paginación deben estar en la URL para que los usuarios puedan marcarla, compartirla y volver a la misma vista sin perder el estado.
Hook useSearchParams
useSearchParams() devuelve la instancia actual de URLSearchParams y una función setter, de forma similar a useState, pero respaldada por la cadena de consulta de la URL.
import { useSearchParams } from 'react-router-dom';
function ProductList() {
const [searchParams, setSearchParams] = useSearchParams();
const query = searchParams.get('q') || '';
const page = Number(searchParams.get('page') || 1);
// ...
}Leer un único parámetro
Use searchParams.get('key') para leer un valor. Devuelve null si el parámetro no existe, por lo que debe proporcionar un valor alternativo.
const sort = searchParams.get('sort') ?? 'name';
const order = searchParams.get('order') ?? 'asc';Escribir parámetros sin navegar
Llame a setSearchParams() con un objeto nuevo o una función actualizadora para cambiar los parámetros. React Router actualiza la URL y vuelve a renderizar sin realizar una navegación completa.
function SortButton({ field }) {
const [searchParams, setSearchParams] = useSearchParams();
const handleClick = () => {
setSearchParams(prev => {
prev.set('sort', field);
prev.set('page', '1');
return prev;
});
};
return <button onClick={handleClick}>Sort by {field}</button>;
}Conservar otros parámetros al actualizar
Use la forma de función actualizadora de setSearchParams para modificar únicamente los parámetros que pretende cambiar y conservar intactos todos los demás.
setSearchParams(prev => {
prev.set('q', newQuery);
// 'sort' and 'page' are unchanged
return prev;
});Sincronizar un campo de entrada con los parámetros de búsqueda
Controle el valor de un campo de entrada mediante el parámetro de la URL y actualice la URL al cambiar para mantener ambos sincronizados.
function SearchBar() {
const [params, setParams] = useSearchParams();
const q = params.get('q') || '';
return (
<input
value={q}
onChange={e => setParams(prev => {
prev.set('q', e.target.value);
prev.set('page', '1');
return prev;
})}
/>
);
}Indicadores booleanos en los parámetros de búsqueda
Use la presencia o ausencia de un parámetro (o una cadena '1'/'0') para representar estados booleanos de la interfaz, como un panel abierto o filtros activos.
const showFilters = searchParams.has('filters');
const toggleFilters = () => {
setSearchParams(prev => {
if (prev.has('filters')) prev.delete('filters');
else prev.set('filters', '1');
return prev;
});
};Valores de array en los parámetros de búsqueda
URLSearchParams admite varios valores para la misma clave. Use getAll('key') para leerlos como un array.
// URL: /products?tag=react&tag=typescript
const tags = searchParams.getAll('tag'); // ['react', 'typescript']
// Setting multiple values:
const newParams = new URLSearchParams();
selectedTags.forEach(t => newParams.append('tag', t));
setSearchParams(newParams);Reemplazar frente a añadir al historial
Pase { replace: true } como segundo argumento a setSearchParams para que los cambios en los filtros no saturen el historial del navegador.
setSearchParams(prev => { prev.set('q', val); return prev; }, { replace: true });Derivar el estado a partir de los parámetros
Calcule los valores derivados (como enteros analizados o enumeraciones validadas) a partir de los parámetros de tipo string sin procesar al principio del componente para utilizarlos de forma segura en todo el componente.
const rawPage = searchParams.get('page');
const page = Math.max(1, parseInt(rawPage || '1', 10));
const rawSort = searchParams.get('sort');
const sort = ['name', 'price', 'date'].includes(rawSort) ? rawSort : 'name';Enlazar con parámetros de búsqueda
Use la propiedad search de un objeto Link o to para navegar a una URL con parámetros de consulta específicos establecidos.
<Link to={{ pathname: '/products', search: '?sort=price&order=asc' }}>
Sort by Price
</Link>Comprobación rápida
¿Qué método de URLSearchParams lee todos los valores de una clave repetida como ?tag=react&tag=ts?
Resumen
useSearchParams() sincroniza el estado del componente con la cadena de consulta de la URL. Use la forma actualizadora para conservar otros parámetros, { replace: true } para evitar sobrecargar el historial y getAll() para los parámetros con valores en forma de array.
Preguntas frecuentes
¿La lección «Gestionar el estado en los parámetros de búsqueda de la URL» es gratis?
Sí — el texto completo de «Gestionar el estado en los parámetros de búsqueda de la URL» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Gestionar el estado en los parámetros de búsqueda de la URL»?
Sincronice los filtros, el orden y la paginación con la URL mediante useSearchParams. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar React Academy?
No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Gestionar el estado en los parámetros de búsqueda de la URL»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de React Academy?
Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Rutas anidadas y layouts con Outlet
- Loaders y actions (API de Data Router)
- Rutas protegidas y guards de autenticación
- Gestionar el estado en los parámetros de búsqueda de la URL