[Feature]: Allow loaders in nested routes to reach into data called by parent/ancestor routes

[dbhoang]

What is the new or updated feature that you are suggesting?

Current behavior for nested loaders in data routers have all loaders firing at once when visiting a route. For example:

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<DataLayout />}>
      <Route path="animals/*" element={<Animals />} loader={animalsLoader} id="animals">
         <Route path=":animalId">
          <Route path="dog" element={<Dog />} loader={dogLoader} />
          <Route path="cat" element={<Cat />} />
        </Route>
      </Route>
    </Route>
  )
)

I have the above router. When you visit /animals/1/dog, the animalsLoader and dogLoader are called at the same time. I'm hoping that we can call these loaders sequentially and allow dogLoader to use information from animalLoader's data.

Why should this feature be included?

If we make this a less trivial example, suppose any nested route under animals calls auth and fetches user information to view any nested route under it. And there's a non-trivial amount of routes under animals. Allowing for sequential loader calls, let's us perform this action easily.

[timdorr]

#9188 (comment)