Query Params y Navigation State

Los query params son los parámetros que van después del ? en una URL: /productos?categoria=electronica&orden=precio. Son diferentes a los parámetros de ruta (:id): mientras /producto/42 identifica un recurso único y específico, los query params configuran cómo filtrar o mostrar los datos. Son ideales para búsquedas y filtros porque persisten en la URL: el usuario puede copiar el link y compartirlo, y quien lo abra verá exactamente los mismos resultados filtrados.

useSearchParams funciona igual a useState pero el estado vive en la URL en lugar de en memoria del componente. La ventaja: el estado sobrevive recargas de página y el usuario puede compartir la URL con filtros incluidos. La desventaja: la URL solo almacena strings, por lo que números y booleanos necesitan parsearse manualmente (Number(searchParams.get("precio"))). Para e-commerce, dashboards analytics, y buscadores con múltiples filtros, useSearchParams es la herramienta correcta.

import { useSearchParams, useLocation } from "react-router-dom";

// Query params: /productos?categoria=tech&orden=precio
function ListaProductos() {
  const [searchParams, setSearchParams] = useSearchParams();

  const categoria = searchParams.get("categoria") || "todos";
  const orden = searchParams.get("orden") || "nombre";

  const cambiarCategoria = (nuevaCategoria) => {
    setSearchParams(prev => {
      prev.set("categoria", nuevaCategoria);
      return prev;
    });
  };

  return (
    <div>
      <div>
        {["todos", "tech", "ropa"].map(cat => (
          <button key={cat} onClick={() => cambiarCategoria(cat)}>
            {cat}
          </button>
        ))}
      </div>
      <p>Mostrando: {categoria}, orden: {orden}</p>
    </div>
  );
}

// Estado en navegación (no persiste en URL)
function PaginaA() {
  const navigate = useNavigate();

  return (
    <button onClick={() =>
      navigate("/pagina-b", { state: { usuarioId: 42, mensaje: "Hola" } })
    }>
      Ir con datos
    </button>
  );
}

function PaginaB() {
  const location = useLocation();
  const { usuarioId, mensaje } = location.state || {};

  return <p>Usuario {usuarioId}: {mensaje}</p>;
}