Yönlendirme
Uygulamayı ortak layout, kısayollu bağlantılar ve geçmiş içeren rotalara ayırın.
Bu bölümde
- Dosyalar birer rotadır
- Ortak bir layout
- Geri gitme
- Dinamik segmentler
App Router, Next.js App Router kurallarını izleyerek app/ içindeki dosyaları URL’lerle eşleştirir. Tarayıcının adres çubuğu ve geçmişi eşzamanlı kalır; böylece arayüz konsolda render edilirken geri, ileri ve derin bağlantılar çalışır.
Dosyalar birer rotadır
Listeyi kendi rotasına taşıyın ve bir ayarlar sayfası ekleyin:
app/ layout.tsx page.tsx → /Eklenen: deployments/Eklenen: page.tsx → /deploymentsEklenen: [id]/page.tsx → /deployments/dpl_8fK2Eklenen: settings/Eklenen: page.tsx → /settingsOrtak bir layout
layout.tsx her sayfayı sarar ve gezinme sırasında durumunu korur. Üst çubuğu ve gezinme öğelerini bu dosyaya yerleştirin.
Eklenen: import type { ReactNode } from "react";Eklenen: import { Box, Spacer, Text } from "@textjs/app";Eklenen: import Link from "@textjs/app/link";Eklenen: import { usePathname } from "@textjs/app/navigation";Eklenen: Eklenen: export const metadata = { title: { default: "Acme Deploys", template: "%s · Acme" } };Eklenen: Eklenen: export default function RootLayout({ children }: { children?: ReactNode }) {Eklenen: const pathname = usePathname();Eklenen: return (Eklenen: <Box className="flex-col grow">Eklenen: <Box className="flex-row h-1 px-1 gap-2">Eklenen: <Text bold>▼ Acme</Text>Eklenen: <Text color="subtle">{`acme.local${pathname === "/" ? "" : pathname}`}</Text>Eklenen: <Spacer />Eklenen: </Box>Eklenen: <Box className="flex-row h-1 px-1 gap-3">Eklenen: <Link href="/" shortcut="1">Overview</Link>Eklenen: <Link href="/deployments" shortcut="2">Deployments</Link>Eklenen: <Link href="/settings" shortcut="3">Settings</Link>Eklenen: </Box>Eklenen: <Box className="flex-col grow p-1">{children}</Box>Eklenen: </Box>Eklenen: );Eklenen: }shortcut bağlantıya tek bir tuş atar. Konsolda 1, 2 ve 3 tuşlarına basın; gerçek bir uygulamanın URL’si her birinde değişirdi.
Geri gitme
useRouter() kod üzerinden gezinmeyi sağlar. Layout içinde Backspace tuşunu router.back() çağrısına bağlayın:
Kaldırılan: import { Box, Spacer, Text } from "@textjs/app";Eklenen: import { Box, Spacer, Text, useInput } from "@textjs/app";import Link from "@textjs/app/link";Kaldırılan: import { usePathname } from "@textjs/app/navigation";Eklenen: import { usePathname, useRouter } from "@textjs/app/navigation";export default function RootLayout({ children }: { children?: ReactNode }) { const pathname = usePathname();Eklenen: const router = useRouter();Eklenen: Eklenen: useInput((e) => {Eklenen: if (e.key === "backspace") router.back();Eklenen: });Dinamik segmentler
[id] klasörleri değerlerini params içinde alır:
import { Text, type PageProps } from "@textjs/app";export default function DeploymentPage({ params }: PageProps<{ id: string }>) { return <Text bold>{params.id}</Text>;}Statik barındırmada bunun gibi dinamik segmentler için index.html dosyasına yeniden yazma kuralı gerekir. Bölüm 10 bu konuyu ele alır.
Dene
Bu, Acme Deploys uygulamasının bölüm sonundaki hâli; DevTools’ta çalışıyor. Odak alanına tıklayın, ardından aşağıdaki tuşları kullanın.
Konsolu açın
Uygulama DevTools’ta render edilir.Önce Safari Ayarlar → İleri Düzey bölümünde “Web geliştiricileri için özellikleri göster” seçeneğini açın. Sonra buraya tıklayın ve 2 tuşuna basın.
Masaüstünde açın
Bu uygulama DevTools konsolunda render edilir; bunun için masaüstü tarayıcısı gerekir.
Test
2 soruBölümü tamamlamak için tüm soruları yanıtlayın.