Routeurroutage PRISM
routage PRISM

Ce tutoriel utilise le routage par fichiers de PRISM : chaque dossier sous src/app/ devient une URL, avec layouts imbriqués et loaders côté serveur.

Voir la doc du routage →
UIbext/ui
bext/ui

Les composants viennent de bext/ui — un portage fidèle de shadcn/ui pour bext et PRISM, stylé via les tokens de route_css.

Explorer bext/ui →
FREN
Étape 8 sur 11 · Afficher des données

Pages de détail

Un segment dynamique [id] capture une partie de l'URL et la passe au loader via params.

Une fiche produit a besoin de son propre URL. Mettez le nom du dossier entre crochets — src/app/products/[id]/page.tsx — et il répond à /products/42. La partie capturée arrive dans le loader sous params.id.

src/app/products/[id]/page.tsx
export async function loader({ params }) {
  const product = CATALOGUE.find((p) => String(p.id) === params.id);
  return { product };
}

Cliquez sur une ligne du tableau Produits dans l'aperçu : elle ouvre la fiche, rendue à partir de l'identifiant de l'URL — côté serveur, sans appel client.

NOTE
Les segments fourre-tout ([...slug]) capturent plusieurs niveaux d'un coup. Référence : routage des fichiers.
Fichiers
src
app
products
[id]
src/app/products/[id]/page.tsxlecture seule
localhost:3000