Routage
App Router basé sur le système de fichiers : layouts, pages, segments dynamiques, Link et hooks de navigation.
L’App Router associe les dossiers de app/ à des URL et les synchronise avec la barre d’adresse et l’historique du navigateur.
Pages
Exportez un composant par défaut depuis page.tsx :
app/sessions/page.tsxtsx
import { Text } from "@textjs/app";export default function SessionsPage() { return <Text bold>Sessions</Text>;}Layouts
Les layouts enveloppent les routes et conservent leur état au fil de la navigation.
app/layout.tsxtsx
import type { ReactNode } from "react";import { Box, Text } from "@textjs/app";import Link from "@textjs/app/link";export const metadata = { title: { default: "Acme", template: "%s · Acme" } };export default function RootLayout({ children }: { children?: ReactNode }) { return ( <Box className="flex-col w-full h-full"> <Box className="flex-row h-1 px-1 gap-2"> <Text bold>▼ Acme</Text> <Link href="/" shortcut="1">Home</Link> <Link href="/sessions" shortcut="2">Sessions</Link> </Box> <Box className="grow">{children}</Box> </Box> );}Segments dynamiques
app/sessions/[id]/page.tsxtsx
import { Text, type PageProps } from "@textjs/app";export default function SessionPage({ params }: PageProps<{ id: string }>) { return <Text>Session {params.id}</Text>;}Navigation
<Link>
<Link> peut recevoir le focus et prend en charge les raccourcis à une seule touche.
| Prop | Description |
|---|---|
href | Chemin de destination |
shortcut | Touche qui ouvre le lien |
replace | Remplacement de l’entrée dans l’historique |
useRouter
Naviguez depuis le code :
const router = useRouter();router.push("/sessions/new");router.back();usePathname et useParams
Lisez la route actuelle :
import { useParams, usePathname } from "@textjs/app/navigation";const pathname = usePathname(); // "/sessions/42"const { id } = useParams<{ id: string }>(); // "42"La navigation vers l’arrière, vers l’avant et les liens profonds fonctionnent tous. Sur un hébergement statique, les segments dynamiques nécessitent un repli vers index.html. L’adaptateur static en crée un sous le nom 404.html.