From f29a16de5c29c91cb00abdaca3c4278171d8e419 Mon Sep 17 00:00:00 2001
From: Zack Tanner <1939140+ztanner@users.noreply.github.com>
Date: Thu, 1 Aug 2024 10:24:50 -0700
Subject: [PATCH] add layout keying

---
 app/search/children-wrapper.tsx | 8 ++++++++
 app/search/layout.tsx           | 5 ++++-
 2 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 app/search/children-wrapper.tsx

diff --git a/app/search/children-wrapper.tsx b/app/search/children-wrapper.tsx
new file mode 100644
index 000000000..8a49aa958
--- /dev/null
+++ b/app/search/children-wrapper.tsx
@@ -0,0 +1,8 @@
+'use client';
+import { useSearchParams } from 'next/navigation';
+import { Fragment } from 'react';
+
+export default function ChildrenWrapper({ children }: { children: React.ReactNode }) {
+  const searchParams = useSearchParams();
+  return <Fragment key={searchParams.get('q')}>{children}</Fragment>;
+}
diff --git a/app/search/layout.tsx b/app/search/layout.tsx
index 5ef628120..1af30ab58 100644
--- a/app/search/layout.tsx
+++ b/app/search/layout.tsx
@@ -2,6 +2,7 @@ import Footer from 'components/layout/footer';
 import Collections from 'components/layout/search/collections';
 import FilterList from 'components/layout/search/filter';
 import { sorting } from 'lib/constants';
+import ChildrenWrapper from './children-wrapper';
 
 export default function SearchLayout({ children }: { children: React.ReactNode }) {
   return (
@@ -10,7 +11,9 @@ export default function SearchLayout({ children }: { children: React.ReactNode }
         <div className="order-first w-full flex-none md:max-w-[125px]">
           <Collections />
         </div>
-        <div className="order-last min-h-screen w-full md:order-none">{children}</div>
+        <div className="order-last min-h-screen w-full md:order-none">
+          <ChildrenWrapper>{children}</ChildrenWrapper>
+        </div>
         <div className="order-none flex-none md:order-last md:w-[125px]">
           <FilterList list={sorting} title="Sort by" />
         </div>