Trasowanie
Podziel aplikację na trasy ze wspólnym layoutem, linkami ze skrótami klawiszowymi i historią.
W tym rozdziale
- Pliki jako trasy
- Wspólny layout
- Powrót
- Segmenty dynamiczne
App Router mapuje pliki w app/ na adresy URL zgodnie z konwencjami Next.js App Router. Pasek adresu i historia przeglądarki pozostają zsynchronizowane, więc przechodzenie wstecz i dalej oraz linki bezpośrednie działają, gdy interfejs renderuje się w konsoli.
Pliki jako trasy
Przenieś listę do osobnej trasy i dodaj stronę ustawień:
app/ layout.tsx page.tsx → /Dodano: deployments/Dodano: page.tsx → /deploymentsDodano: [id]/page.tsx → /deployments/dpl_8fK2Dodano: settings/Dodano: page.tsx → /settingsWspólny layout
layout.tsx otacza każdą stronę i zachowuje swój stan podczas nawigacji. Umieść w nim górny pasek i nawigację.
Dodano: import type { ReactNode } from "react";Dodano: import { Box, Spacer, Text } from "@textjs/app";Dodano: import Link from "@textjs/app/link";Dodano: import { usePathname } from "@textjs/app/navigation";Dodano: Dodano: export const metadata = { title: { default: "Acme Deploys", template: "%s · Acme" } };Dodano: Dodano: export default function RootLayout({ children }: { children?: ReactNode }) {Dodano: const pathname = usePathname();Dodano: return (Dodano: <Box className="flex-col grow">Dodano: <Box className="flex-row h-1 px-1 gap-2">Dodano: <Text bold>▼ Acme</Text>Dodano: <Text color="subtle">{`acme.local${pathname === "/" ? "" : pathname}`}</Text>Dodano: <Spacer />Dodano: </Box>Dodano: <Box className="flex-row h-1 px-1 gap-3">Dodano: <Link href="/" shortcut="1">Overview</Link>Dodano: <Link href="/deployments" shortcut="2">Deployments</Link>Dodano: <Link href="/settings" shortcut="3">Settings</Link>Dodano: </Box>Dodano: <Box className="flex-col grow p-1">{children}</Box>Dodano: </Box>Dodano: );Dodano: }shortcut przypisuje pojedynczy klawisz do linku. Naciśnij 1, 2 i 3 w konsoli; w rzeczywistej aplikacji adres URL zmieniałby się po każdym z nich.
Powrót
useRouter() umożliwia nawigację z kodu. Powiąż Backspace z router.back() w layoucie:
Usunięto: import { Box, Spacer, Text } from "@textjs/app";Dodano: import { Box, Spacer, Text, useInput } from "@textjs/app";import Link from "@textjs/app/link";Usunięto: import { usePathname } from "@textjs/app/navigation";Dodano: import { usePathname, useRouter } from "@textjs/app/navigation";export default function RootLayout({ children }: { children?: ReactNode }) { const pathname = usePathname();Dodano: const router = useRouter();Dodano: Dodano: useInput((e) => {Dodano: if (e.key === "backspace") router.back();Dodano: });Segmenty dynamiczne
Foldery [id] otrzymują swoją wartość w params:
import { Text, type PageProps } from "@textjs/app";export default function DeploymentPage({ params }: PageProps<{ id: string }>) { return <Text bold>{params.id}</Text>;}Na hostingu statycznym takie segmenty dynamiczne wymagają reguły przepisywania adresów na index.html. Omawia to rozdział 10.
Wypróbuj
To Acme Deploys na końcu rozdziału, uruchomiona w DevTools. Kliknij panel, a potem użyj poniższych klawiszy.
Otwórz konsolę
Aplikacja renderuje się w DevTools.Najpierw włącz „Pokazuj funkcje dla deweloperów witryn” w Safari: Ustawienia → Zaawansowane. Potem kliknij tutaj i naciśnij 2.
Otwórz na komputerze
Ta aplikacja renderuje się w konsoli DevTools, która wymaga przeglądarki na komputerze.
Quiz
2 pytaniaOdpowiedz na wszystkie pytania, aby ukończyć rozdział.