Item: cherry

URL pattern: /examples/items/[id] — the segment cherry arrived as props.params.id.

Tip

Throwing a Response from the loader (throw new Response(…, { status: 404 })) short-circuits rendering immediately and returns that HTTP response as-is — handy for 404s, redirects, or any guard logic.

Route param + loader data

cherry — tart-sweet (#dc2626)

src/app/examples/items/[id]/page.tsxTSX

// params arrive pre-typed — no URL parsing needed in your loader.
// Throw a Response to short-circuit with an HTTP status code.
export async function loader({ request, params }: LoaderArgs) {
  const item = KNOWN[params.id];
  if (!item) {
    throw new Response(`No item named "${params.id}".`, {
      status: 404,
      headers: { "content-type": "text/plain" },
    });
  }
  return { id: params.id, ...item, locale: localeFromRequest(request) };
}

// props.params mirrors the folder name: [id] → params.id
export default function Page(props: PageProps): any {
  const { id, color, flavor } = props.data!;
  return <p>{id} — {flavor} ({color})</p>;
}

← back to the index