Signature

function useRouteLoaderData<T = unknown>(
  id: string,
): RouteData<T> | undefined;

Parameters

Pass the route’s manifest id, not its URL or file path. The reserved ID root selects root data. The optional generic accepts a loader function type or a result type. Requires RouterApplication or mountApplication.

Returns

Returns RouteData<T> or undefined. An ordinary route must exist in the application manifest and be the active snapshot path. The hook does not load inactive routes or retain a cache of previously visited pages.

Example

The manifest assigns id: "tasks" to the task route. Its loader type can be imported without importing the server implementation into the browser.

import { useRouteLoaderData } from "@kasperrt/smolter/preact";
import type { loader } from "../routes/tasks/loader";

export function TaskCount() {
  const data = useRouteLoaderData<typeof loader>("tasks");

  return <span>{data?.tasks.length ?? 0} tasks</span>;
}

Independent reads

Use fetcher.load with a concrete route URL when you need data from an inactive route. That result belongs to fetcher.data. This hook reads the active loader snapshot and does not read fetcher results or actionData.