useRouteLoaderData

This hook is simply a re-export of React Router useRouteLoaderData.

Pass in a route ID and it will return the loader data for that route.

  1. import { useRouteLoaderData } from "@remix-run/react";
  2. function SomeComponent() {
  3. const { user } = useRouteLoaderData("root");
  4. }

Remix creates the route IDs automatically. They are simply the path of the route file relative to the app folder without the extension.

Route FilenameRoute ID
app/root.tsx“root”
app/routes/teams.tsx“routes/teams”
app/routes/teams.$id.tsx“routes/teams.$id”

For more information and usage, please refer to the React Router useRouteLoaderData docs.