Pengaturan route
Pisahkan aplikasi menjadi route dengan layout bersama, tautan berpintasan, dan riwayat.
Dalam bab ini
- File sebagai route
- Layout bersama
- Kembali
- Segmen dinamis
App Router memetakan file di app/ ke URL, mengikuti konvensi App Router Next.js. Bilah alamat dan riwayat browser tetap sinkron, sehingga navigasi kembali, maju, dan deep link berfungsi saat UI di-render di konsol.
File sebagai route
Pindahkan daftar ke route tersendiri dan tambahkan halaman pengaturan:
app/ layout.tsx page.tsx → /Ditambahkan: deployments/Ditambahkan: page.tsx → /deploymentsDitambahkan: [id]/page.tsx → /deployments/dpl_8fK2Ditambahkan: settings/Ditambahkan: page.tsx → /settingsLayout bersama
layout.tsx membungkus setiap halaman dan mempertahankan state-nya saat berpindah halaman. Tempatkan bilah atas dan navigasi di dalamnya.
Ditambahkan: import type { ReactNode } from "react";Ditambahkan: import { Box, Spacer, Text } from "@textjs/app";Ditambahkan: import Link from "@textjs/app/link";Ditambahkan: import { usePathname } from "@textjs/app/navigation";Ditambahkan: Ditambahkan: export const metadata = { title: { default: "Acme Deploys", template: "%s · Acme" } };Ditambahkan: Ditambahkan: export default function RootLayout({ children }: { children?: ReactNode }) {Ditambahkan: const pathname = usePathname();Ditambahkan: return (Ditambahkan: <Box className="flex-col grow">Ditambahkan: <Box className="flex-row h-1 px-1 gap-2">Ditambahkan: <Text bold>▼ Acme</Text>Ditambahkan: <Text color="subtle">{`acme.local${pathname === "/" ? "" : pathname}`}</Text>Ditambahkan: <Spacer />Ditambahkan: </Box>Ditambahkan: <Box className="flex-row h-1 px-1 gap-3">Ditambahkan: <Link href="/" shortcut="1">Overview</Link>Ditambahkan: <Link href="/deployments" shortcut="2">Deployments</Link>Ditambahkan: <Link href="/settings" shortcut="3">Settings</Link>Ditambahkan: </Box>Ditambahkan: <Box className="flex-col grow p-1">{children}</Box>Ditambahkan: </Box>Ditambahkan: );Ditambahkan: }shortcut mengikat satu tombol ke tautan. Tekan 1, 2, dan 3 di konsol; URL aplikasi nyata akan berubah setiap kali salah satu tombol ditekan.
Kembali
useRouter() menjalankan navigasi dari kode. Hubungkan Backspace ke router.back() di layout:
Dihapus: import { Box, Spacer, Text } from "@textjs/app";Ditambahkan: import { Box, Spacer, Text, useInput } from "@textjs/app";import Link from "@textjs/app/link";Dihapus: import { usePathname } from "@textjs/app/navigation";Ditambahkan: import { usePathname, useRouter } from "@textjs/app/navigation";export default function RootLayout({ children }: { children?: ReactNode }) { const pathname = usePathname();Ditambahkan: const router = useRouter();Ditambahkan: Ditambahkan: useInput((e) => {Ditambahkan: if (e.key === "backspace") router.back();Ditambahkan: });Segmen dinamis
Folder [id] menerima nilainya dalam params:
import { Text, type PageProps } from "@textjs/app";export default function DeploymentPage({ params }: PageProps<{ id: string }>) { return <Text bold>{params.id}</Text>;}Pada host statis, segmen dinamis seperti ini memerlukan rewrite ke index.html. Bab 10 membahasnya.
Coba
Ini Acme Deploys di akhir bab, berjalan di DevTools. Klik pad, lalu gunakan tombol di bawah.
Buka konsol
Aplikasi ini di-render di DevTools.Aktifkan dahulu “Tampilkan fitur untuk pengembang web” di Setelan Safari → Lanjutan. Lalu klik di sini dan tekan 2.
Buka di desktop
Aplikasi ini di-render di konsol DevTools, yang memerlukan browser desktop.
Kuis
2 pertanyaanJawab semua pertanyaan untuk menyelesaikan bab.