All Parent Routes Loader Data

[Tamir-M]

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

Would be useful to be able to get the entire loader data even including parent route from a single hook.

Example:

// routes.tsx
const router = createBrowserRouter(
  [
    {
      path: '/',
      element: <Root />,
      loader: () => ({ a: 1 }),
      children: [
        {
          path: '/secondary',
          element: <Secondary />,
          loader: () => ({ b: 2 }),
        },
      ],
    },
  ],
);

// Secondary.tsx
const Secondary = () => {
  const data = useAllLoaderData(); // data =  { a: 1, b: 2 }

  return (
    <div>
      Secondary
    </div>
  );
}

Why should this feature be included?

Usually loader are used to check for authorization at the top level or for other things, may want to use information returned from the loaders to the components, I know there's an option to use useRouteLoaderData to get the root route's loader data using an ID, but there could be multiple parents etc, I feel like this could be used very often.

Would love to hear some feedback and see if you think this could be useful.

[kiliman]

The useMatches hook will return all route data from root to leaf route.

https://reactrouter.com/en/main/hooks/use-matches

[Tamir-M]

Didn't see that, thank you.