Routing
Dividi l’app in route con un layout condiviso, link con scorciatoie e cronologia.
In questo capitolo
- I file sono route
- Un layout condiviso
- Tornare indietro
- Segmenti dinamici
L’App Router associa i file in app/ agli URL, seguendo le convenzioni dell’App Router di Next.js. La barra degli indirizzi e la cronologia del browser restano sincronizzate, quindi indietro, avanti e i deep link funzionano mentre l’interfaccia viene renderizzata nella console.
I file sono route
Sposta l’elenco in una route dedicata e aggiungi una pagina delle impostazioni:
app/ layout.tsx page.tsx → /Aggiunto: deployments/Aggiunto: page.tsx → /deploymentsAggiunto: [id]/page.tsx → /deployments/dpl_8fK2Aggiunto: settings/Aggiunto: page.tsx → /settingsUn layout condiviso
layout.tsx racchiude ogni pagina e mantiene il proprio stato durante la navigazione. Inserisci al suo interno la barra superiore e la navigazione.
Aggiunto: import type { ReactNode } from "react";Aggiunto: import { Box, Spacer, Text } from "@textjs/app";Aggiunto: import Link from "@textjs/app/link";Aggiunto: import { usePathname } from "@textjs/app/navigation";Aggiunto: Aggiunto: export const metadata = { title: { default: "Acme Deploys", template: "%s · Acme" } };Aggiunto: Aggiunto: export default function RootLayout({ children }: { children?: ReactNode }) {Aggiunto: const pathname = usePathname();Aggiunto: return (Aggiunto: <Box className="flex-col grow">Aggiunto: <Box className="flex-row h-1 px-1 gap-2">Aggiunto: <Text bold>▼ Acme</Text>Aggiunto: <Text color="subtle">{`acme.local${pathname === "/" ? "" : pathname}`}</Text>Aggiunto: <Spacer />Aggiunto: </Box>Aggiunto: <Box className="flex-row h-1 px-1 gap-3">Aggiunto: <Link href="/" shortcut="1">Overview</Link>Aggiunto: <Link href="/deployments" shortcut="2">Deployments</Link>Aggiunto: <Link href="/settings" shortcut="3">Settings</Link>Aggiunto: </Box>Aggiunto: <Box className="flex-col grow p-1">{children}</Box>Aggiunto: </Box>Aggiunto: );Aggiunto: }shortcut associa un singolo tasto al link. Premi 1, 2 e 3 nella console; l’URL di un’app reale cambierebbe a ogni pressione.
Tornare indietro
useRouter() gestisce la navigazione dal codice. Associa Backspace a router.back() nel layout:
Rimosso: import { Box, Spacer, Text } from "@textjs/app";Aggiunto: import { Box, Spacer, Text, useInput } from "@textjs/app";import Link from "@textjs/app/link";Rimosso: import { usePathname } from "@textjs/app/navigation";Aggiunto: import { usePathname, useRouter } from "@textjs/app/navigation";export default function RootLayout({ children }: { children?: ReactNode }) { const pathname = usePathname();Aggiunto: const router = useRouter();Aggiunto: Aggiunto: useInput((e) => {Aggiunto: if (e.key === "backspace") router.back();Aggiunto: });Segmenti dinamici
Le cartelle [id] ricevono il proprio valore in params:
import { Text, type PageProps } from "@textjs/app";export default function DeploymentPage({ params }: PageProps<{ id: string }>) { return <Text bold>{params.id}</Text>;}Su un host statico, i segmenti dinamici come questo richiedono una riscrittura verso index.html. Il capitolo 10 tratta questo argomento.
Provala
Questa è Acme Deploys alla fine del capitolo, in esecuzione in DevTools. Fai clic sul pannello del focus, poi usa i tasti qui sotto.
Apri la console
L’app viene renderizzata in DevTools.Prima attiva «Mostra funzionalità per sviluppatori web» in Safari Impostazioni → Avanzate. Poi fai clic qui e premi 2.
Aprire su desktop
Questa app viene renderizzata nella console DevTools, che richiede un browser desktop.
Quiz
2 domandeRispondi a tutte le domande per completare il capitolo.