Item: banana

URL pattern: /examples/items/[id] — the segment banana 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

banana — creamy-sweet (#facc15)

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