Add workloads/ecommerce/src/components/catalog/CatalogRouteBoundary.tsx

workloads/ecommerce/src/components/catalog/CatalogRouteBoundary.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { usePathname, useSearchParams } from "next/navigation";
+
+type CatalogRouteBoundaryProps = {
+  children: ReactNode;
+};
+
+/**
+ * Fuerza el remontaje del árbol del catálogo cuando cambia:
+ * - pathname
+ * - category
+ * - collection
+ * - section
+ * - búsqueda, orden u otros parámetros
+ *
+ * Esto evita que useState/useMemo conserven filtros de una navegación anterior.
+ */
+export default function CatalogRouteBoundary({
+  children,
+}: CatalogRouteBoundaryProps) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const navigationKey = `${pathname}?${searchParams.toString()}`;
+
+  return <div key={navigationKey}>{children}</div>;
+}