Nested Layout loader and action

[jglee96]

Hi 👋 ,
I have some loader and action problem.

my router looks like this.

createBrowserRouter(
  createRoutesFromElements(
    <>
      <Route loader={navbarLoader} element={<Navbar />}> // <-- has loader and <Outlet>
        <Route lazy={async () => await import("routes/Sider")}> // <-- has loader and <Outlet>
          <Route path="/" index lazy={async () => await import("components/content1")} /> // <-- has loader and action
          <Route path="content2" lazy={async () => await import("components/content2")} /> // <-- has loader and action
        </Route>
        <Route path="other" lazy={async () => await import("routes/other")} />
      </Route>
      <Route path="/signin" element={<Signin />} />
      <Route path="/signout" element={<Signout />} />
    </>,
  ),
),

and file structure looks like this (actually, it looks weired. I have to move some components to routes)

src/
├─ components/
     ├─ Navbar.tsx
     ├─ content1.tsx
     └─ content2.tsx
└─ routes/
     ├─ Signin.tsx
     ├─ Signout.tsx
     └─ Sider.tsx

When I form submit from content1.tsx, I expected that the submit only excute the content1's loader.
However, navbarLoader and Sider's loader were also excuted.

The nested layout sholud not have loader?
How can i only excute the contet1's loader?

I search some issue remix-run/remix#2307
However, I think that is not work for nested layout.

[jglee96]

Is it could opt by "shouldRevalidate"?

[brophdawg11]

Yes - by default any action submission causes all active loaders to revalidate and you can opt out with shouldRevalidate