Triggering all loaders for navigate(/some/path)

[ahmed-revv]

Overview

I am using react route v7 as framework mode + SPA (ssr: false). My project has below layout component (layout.tsx):

export async function clientLoader({params}) {
    const { s1, s2 } = params;
    const data = getData(s1);  // data is a list of items shown as dropdown in the sidebar
    return {data, s2}   // data = ["p1", "p2", "p3"]
}

export default function AppLayout({ loaderData }: any) {
  const { data, s2 } = loaderData;

  return (
    <div className="flex h-screen bg-gray-50">
      <Sidebar data={data} current_item={s2} />
      <div className="flex flex-col flex-1 overflow-hidden">
        <main className="flex-1 overflow-auto p-4 md:p-6">
          <div className="max-w-7xl mx-auto">
            <Outlet />
          </div>
        </main>
      </div>
    </div>
  );
}

Question

Assuming I am on the route /somepath/p1 and the sidebar dropdown has [p1, p2, p3] and p1 is active. When user clicks on p2, I want to navigate to /somepath/p2 and the sidebar should have the current_item as p2. Currently, I have implemented the below action in layout.tsx just to trigger the loaders and pass current item to the sidebar from layout loader. Note that /somepath/:id has its corresponding clientLoader to get the data.

export async function clientAction({ request }: any) {
  const formData = await request.formData();
  return redirect(getRoutePath(formData.get("s1"), formData.get("s2")),
  );
}

I have used clientAction explicitly here since it triggers the loader in layout route (and fetch the latest data and active state) as well. I tried doing just navigate to /somepaht/p2 but that doesn't trigger layout loader (which I think is expected) and hence sidebar data and active item is not updated to reflect the current state.

But, calling an action without any mutation seems bit odd. Is there any better solution for the above use case ? Could someone please help with this ?

[ahmed-revv]

I guess we should manipulate the header using react state + useState for the active item. But, that becomes bit extra code and I was wondering if there is a better remix/react router way for this.