Routing
Die App in Routen mit gemeinsamem Layout, Links mit Tastenkürzeln und Verlauf aufteilen.
In diesem Kapitel
- Dateien als Routen
- Ein gemeinsames Layout
- Zurück navigieren
- Dynamische Segmente
Der App Router ordnet Dateien in app/ URLs zu und folgt dabei den Konventionen des Next.js App Router. Die Adressleiste und der Verlauf des Browsers bleiben synchron, sodass Zurück, Vorwärts und Deep-Links funktionieren, während die UI in der Konsole rendert.
Dateien als Routen
Verschiebe die Liste in eine eigene Route und füge eine Einstellungsseite hinzu:
app/ layout.tsx page.tsx → /Hinzugefügt: deployments/Hinzugefügt: page.tsx → /deploymentsHinzugefügt: [id]/page.tsx → /deployments/dpl_8fK2Hinzugefügt: settings/Hinzugefügt: page.tsx → /settingsEin gemeinsames Layout
layout.tsx umschließt jede Seite und behält seinen Zustand beim Navigieren bei. Platziere die obere Leiste und die Navigation darin.
Hinzugefügt: import type { ReactNode } from "react";Hinzugefügt: import { Box, Spacer, Text } from "@textjs/app";Hinzugefügt: import Link from "@textjs/app/link";Hinzugefügt: import { usePathname } from "@textjs/app/navigation";Hinzugefügt: Hinzugefügt: export const metadata = { title: { default: "Acme Deploys", template: "%s · Acme" } };Hinzugefügt: Hinzugefügt: export default function RootLayout({ children }: { children?: ReactNode }) {Hinzugefügt: const pathname = usePathname();Hinzugefügt: return (Hinzugefügt: <Box className="flex-col grow">Hinzugefügt: <Box className="flex-row h-1 px-1 gap-2">Hinzugefügt: <Text bold>▼ Acme</Text>Hinzugefügt: <Text color="subtle">{`acme.local${pathname === "/" ? "" : pathname}`}</Text>Hinzugefügt: <Spacer />Hinzugefügt: </Box>Hinzugefügt: <Box className="flex-row h-1 px-1 gap-3">Hinzugefügt: <Link href="/" shortcut="1">Overview</Link>Hinzugefügt: <Link href="/deployments" shortcut="2">Deployments</Link>Hinzugefügt: <Link href="/settings" shortcut="3">Settings</Link>Hinzugefügt: </Box>Hinzugefügt: <Box className="flex-col grow p-1">{children}</Box>Hinzugefügt: </Box>Hinzugefügt: );Hinzugefügt: }shortcut bindet eine einzelne Taste an den Link. Drücke 1, 2 und 3 in der Konsole; die URL einer echten App würde sich bei jedem Tastendruck ändern.
Zurück navigieren
useRouter() navigiert aus dem Code heraus. Verknüpfe Backspace im Layout mit router.back():
Entfernt: import { Box, Spacer, Text } from "@textjs/app";Hinzugefügt: import { Box, Spacer, Text, useInput } from "@textjs/app";import Link from "@textjs/app/link";Entfernt: import { usePathname } from "@textjs/app/navigation";Hinzugefügt: import { usePathname, useRouter } from "@textjs/app/navigation";export default function RootLayout({ children }: { children?: ReactNode }) { const pathname = usePathname();Hinzugefügt: const router = useRouter();Hinzugefügt: Hinzugefügt: useInput((e) => {Hinzugefügt: if (e.key === "backspace") router.back();Hinzugefügt: });Dynamische Segmente
[id]-Ordner erhalten ihren Wert in params:
import { Text, type PageProps } from "@textjs/app";export default function DeploymentPage({ params }: PageProps<{ id: string }>) { return <Text bold>{params.id}</Text>;}Auf einem statischen Host benötigen dynamische Segmente wie dieses eine Rewrite-Regel auf index.html. Kapitel 10 behandelt das.
Ausprobieren
Das ist Acme Deploys am Ende des Kapitels, ausgeführt in DevTools. Klicke auf das Pad und nutze dann die Tasten unten.
Die Konsole öffnen
Die App rendert in DevTools.Aktiviere zuerst „Funktionen für Webentwickler anzeigen“ unter Safari Einstellungen → Erweitert. Klicke dann hier und drücke 2.
Auf einem Desktop öffnen
Diese App rendert in der DevTools-Konsole, die einen Desktop-Browser benötigt.
Quiz
2 FragenBeantworte jede Frage, um das Kapitel abzuschließen.