Routage
Divisez l’application en routes avec un layout partagé, des liens avec raccourcis et un historique.
Dans ce chapitre
- Les fichiers sont des routes
- Un layout partagé
- Revenir en arrière
- Segments dynamiques
L’App Router associe les fichiers de app/ à des URL, selon les conventions de l’App Router de Next.js. La barre d’adresse et l’historique du navigateur restent synchronisés : le retour, l’avance et les liens profonds fonctionnent pendant que l’interface s’affiche dans la console.
Les fichiers sont des routes
Déplacez la liste dans sa propre route et ajoutez une page de paramètres :
app/ layout.tsx page.tsx → /Ajouté : deployments/Ajouté : page.tsx → /deploymentsAjouté : [id]/page.tsx → /deployments/dpl_8fK2Ajouté : settings/Ajouté : page.tsx → /settingsUn layout partagé
layout.tsx enveloppe chaque page et conserve son état au fil de la navigation. Placez-y la barre supérieure et la navigation.
Ajouté : import type { ReactNode } from "react";Ajouté : import { Box, Spacer, Text } from "@textjs/app";Ajouté : import Link from "@textjs/app/link";Ajouté : import { usePathname } from "@textjs/app/navigation";Ajouté : Ajouté : export const metadata = { title: { default: "Acme Deploys", template: "%s · Acme" } };Ajouté : Ajouté : export default function RootLayout({ children }: { children?: ReactNode }) {Ajouté : const pathname = usePathname();Ajouté : return (Ajouté : <Box className="flex-col grow">Ajouté : <Box className="flex-row h-1 px-1 gap-2">Ajouté : <Text bold>▼ Acme</Text>Ajouté : <Text color="subtle">{`acme.local${pathname === "/" ? "" : pathname}`}</Text>Ajouté : <Spacer />Ajouté : </Box>Ajouté : <Box className="flex-row h-1 px-1 gap-3">Ajouté : <Link href="/" shortcut="1">Overview</Link>Ajouté : <Link href="/deployments" shortcut="2">Deployments</Link>Ajouté : <Link href="/settings" shortcut="3">Settings</Link>Ajouté : </Box>Ajouté : <Box className="flex-col grow p-1">{children}</Box>Ajouté : </Box>Ajouté : );Ajouté : }shortcut associe une seule touche au lien. Appuyez sur 1, 2 et 3 dans la console ; l’URL d’une véritable application changerait à chaque pression.
Revenir en arrière
useRouter() déclenche la navigation depuis le code. Associez Backspace à router.back() dans le layout :
Supprimé : import { Box, Spacer, Text } from "@textjs/app";Ajouté : import { Box, Spacer, Text, useInput } from "@textjs/app";import Link from "@textjs/app/link";Supprimé : import { usePathname } from "@textjs/app/navigation";Ajouté : import { usePathname, useRouter } from "@textjs/app/navigation";export default function RootLayout({ children }: { children?: ReactNode }) { const pathname = usePathname();Ajouté : const router = useRouter();Ajouté : Ajouté : useInput((e) => {Ajouté : if (e.key === "backspace") router.back();Ajouté : });Segments dynamiques
Les dossiers [id] reçoivent leur valeur dans params :
import { Text, type PageProps } from "@textjs/app";export default function DeploymentPage({ params }: PageProps<{ id: string }>) { return <Text bold>{params.id}</Text>;}Sur un hébergement statique, les segments dynamiques comme celui-ci nécessitent une réécriture vers index.html. Le chapitre 10 traite de ce sujet.
Essayer
Voici Acme Deploys en fin de chapitre, en cours d’exécution dans DevTools. Cliquez sur le pavé, puis utilisez les touches ci-dessous.
Ouvrir la console
L’application s’affiche dans DevTools.Activez d’abord « Afficher les fonctionnalités pour les développeurs web » dans Safari Réglages → Avancés. Puis cliquez ici et appuyez sur 2.
Ouvrir sur ordinateur
Cette application s’affiche dans la console DevTools, qui nécessite un navigateur sur ordinateur.
Quiz
2 questionsRépondez à toutes les questions pour terminer le chapitre.