Do we have to define routes under under one router in the same scope to use LoaderData

[alikleit]

I noticed that the route loader data are only fetched when initialized and loaded under the same scope, and when we go though the components and define a new <Routes> in a particular component and then define the <Route > inside, loader data will stop propagating, nor give you the loader data of that route.

For example, I have the following code where I initialize the RouterProvider under the QueryClientProvider in the root of the application:

<QueryClientProvider client={queryClient}>
   <BaseLayout>
        <RouterProvider router={root_router} />
   </BaseLayout>
</QueryClientProvider>

the root_router defines the following routes:

const root_router= createBrowserRouter(
  createRoutesFromElements(
    <>
      <Route id="root-simple" path="/" loader={() => ({ test: true })} element={<SimpleLayout />}>
 
        <Route
          id="sign-in"
          path={'/signin/*'}
          loader={() => ({ test2: true })}
          element={<SignIn />}
        >
          <Route path={'step1'} element={<SignInStep1 />} />
      </Route>

      <Route id="root-management" path="/manage" element={<ManagementLayout />}>
        <Route path="/manage" element={<Home />} />
      </Route>
    </>
  ),
  {
    basename: '/portal'
  }
);

If I use the hook useLoaderData and log the result in the components above it will give the right data. However, when I go inside the component <Login /> and define the following routes under <Routes />:

// login.tsx

<Routes>
    <Route path={'step2'} element={<SignInStep2 loader={() => ({ test: true })}  />
</Routes>

then the useLoaderData in the SignInStep2 component will always return undefined and lose track.

Should we always define the routes in one createBrowserRouter section for the entire application to use the loader feature, or is there another way to accomplish that?