useRouteLoaderData
On this page

useRouteLoaderData

Summary

Reference Documentation ↗

Returns the loader data for a given route by route ID.

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

Route Filename Route ID
app/root.tsx "root"
app/routes/teams.tsx "routes/teams"
app/whatever/teams.$id.tsx "whatever/teams.$id"
import { useRouteLoaderData } from "react-router";

function SomeComponent() {
  const { user } = useRouteLoaderData("root");
}

// You can also specify your own route ID's manually in your routes.ts file:
route("/", "containers/app.tsx", { id: "app" }})
useRouteLoaderData("app");

Signature

useRouteLoaderData<T = any>(routeId: string): SerializeFrom<T> | undefined

Params

routeId

The ID of the route to return loader data from

Docs and examples CC 4.0
Edit