useLoaderData not returning data from closest route

[akmur]

Hi everyone, this message is to understand what I'm doing wrong with nested routes.

I understood that useLoaderData "Returns the serialized data from the closest route loader." as the docs say.

So I setup a very simple example with these routes

example.tsx // the layout
example._index.tsx // myapp/example
example.finish.tsx // myapp/example/finish

I added a different text in each of them to make sure they were rendering correctly, and they were fine.

Then I tried to add a loader

My example.tsx looks like this:

import { Outlet } from "@remix-run/react";
import type { LoaderFunction } from "@remix-run/node";

export const loader: LoaderFunction = async () => {
  return {
    message: "Hello from the loader!"
  };
};

export default function Example() {
  return (
    <div>
      <h1>Layout</h1>
      <Outlet />
    </div>
  );
}

example._index.tsx

import { useLoaderData, Link } from "@remix-run/react";

export default function ExampleIndex() {
  const { message } = useLoaderData<{
    message: string;
  }>();

  return (
    <div>
      <h1>Example Index {message}</h1>
      <Link to="/example/finish">Finish</Link>
    </div>
  );
}

but now there is an error when I visit myapp/example

TypeError: Cannot destructure property 'message' of 'useLoaderData3(...)' as it is null.

So it seems I understood the whole thing wrong, I assumed by using useLoaderData I could access the data loaded in the route loader. What am I doing wrong?

Many thanks - and thanks for remix

[gustavopch]

It gives access to the data returned by the loader defined in the same route module. It won’t get data from a parent.

[akmur]

So this means on a route components have access to the loader data, but child pages need their own loader, correct? Thx a lot

[gustavopch]

Yes, example.tsx and example._index.tsx are considered different routes by Remix (the former is a layout route, the later is an index route) although both are located at /example.

[kiliman]

To access parent routes, either use useMatches (all matching routes) or useRouteLoaderData (specify route id)

import { type loader as parentLoader } from '~/routes/example'

const { message } = useRouteLoaderData<typeof parentLoader>('routes/example')

NOTE: to get type inference, you should return loader data using the json or defer helper.

return json({ message: 'Hello from the loader!' })

// you can now get type inference 
const { message } = useLoaderData<typeof loader>()

[octet-stream]

Either this is me misunderstanding the docs, or this needed some more clarification on useLoaderData page. The description says:

Returns the serialized data from the closest route loader.

...and I got confused thinking that "closest route loader" means "closest route with exported loader function", including parent route of the component that called useLoaderData. So maybe this needs to be mentioned on the page with links to valid methods to get the data explicitly for parent routes?

[kiliman]

Technically, any component rendered directly by that route and NOT rendered in an <Outlet> (since that will use the child routes loader) will use the current route loader data.

NOTE: The components can be imported from separate files. They don't need to be included in the route module.

export function loader() {}

export default function RouteComponent() {
  return (
    <>
      <SomeComponent />
      <NestedComponent />
      <Outlet /> {/* Any components rendered in outlet will use child route loader */}
    </>
  )
}

function SomeComponent() {
  const data = useLoaderData() // this gets loader data for this route
  return <div>Hello</div>
}

function NestedComponent() {
  const data = useLoaderData() // this gets loader data for this route
  return <ChildComponent>
}

function ChildComponent() {
  const data = useLoaderData() // this gets loader data for this route
  return <div>Child</div>
}