Élément : banana

Modèle d'URL : /examples/items/[id] — le segment banana est arrivé via props.params.id.

Astuce

Lever une Response depuis le loader (throw new Response(…, { status: 404 })) court-circuite immédiatement le rendu et renvoie la réponse HTTP telle quelle — pratique pour les 404, les redirections ou toute logique de garde.

Paramètre de route + données du loader

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>;
    }

← retour à l'index