مسیریابی

برنامه را به مسیرهایی با چیدمان مشترک، پیوندهای دارای میان‌بر و تاریخچه تقسیم کنید.

اپ این فصل در کنسول شما در حال اجراست. آن را با ⌘⌥JCtrl+Shift+J⌘⌥KCtrl+Shift+K⌘⌥C باز کنید (ابتدا ویژگی‌های توسعه‌دهنده را فعال کنید)، سپس امتحانش کنید.
تماشای فصل3:46

در این فصل

  • فایل‌ها به‌عنوان مسیر
  • چیدمان مشترک
  • بازگشت
  • بخش‌های پویا

⁦App Router⁩ با پیروی از قراردادهای ⁦App Router⁩ در Next.js، فایل‌های app/ را به URLها نگاشت می‌کند. نوار نشانی و تاریخچه مرورگر همگام می‌مانند، بنابراین بازگشت، رفتن به جلو و پیوندهای عمیق هنگام رندر رابط کاربری در کنسول کار می‌کنند.

فایل‌ها به‌عنوان مسیر

فهرست را به مسیر خودش منتقل کنید و یک صفحه تنظیمات اضافه کنید:

app/+5text
app/  layout.tsx  page.tsx                 → /افزوده‌شده:   deployments/افزوده‌شده:     page.tsx               → /deploymentsافزوده‌شده:     [id]/page.tsx          → /deployments/dpl_8fK2افزوده‌شده:   settings/افزوده‌شده:     page.tsx               → /settings

چیدمان مشترک

فایل layout.tsx هر صفحه را در بر می‌گیرد و وضعیت خود را هنگام جابه‌جایی بین مسیرها حفظ می‌کند. نوار بالا و ناوبری را در آن قرار دهید.

app/layout.tsx+25tsx
افزوده‌شده: import type { ReactNode } from "react";افزوده‌شده: import { Box, Spacer, Text } from "@textjs/app";افزوده‌شده: import Link from "@textjs/app/link";افزوده‌شده: import { usePathname } from "@textjs/app/navigation";افزوده‌شده: افزوده‌شده: export const metadata = { title: { default: "Acme Deploys", template: "%s · Acme" } };افزوده‌شده: افزوده‌شده: export default function RootLayout({ children }: { children?: ReactNode }) {افزوده‌شده:   const pathname = usePathname();افزوده‌شده:   return (افزوده‌شده:     <Box className="flex-col grow">افزوده‌شده:       <Box className="flex-row h-1 px-1 gap-2">افزوده‌شده:         <Text bold>▼ Acme</Text>افزوده‌شده:         <Text color="subtle">{`acme.local${pathname === "/" ? "" : pathname}`}</Text>افزوده‌شده:         <Spacer />افزوده‌شده:       </Box>افزوده‌شده:       <Box className="flex-row h-1 px-1 gap-3">افزوده‌شده:         <Link href="/" shortcut="1">Overview</Link>افزوده‌شده:         <Link href="/deployments" shortcut="2">Deployments</Link>افزوده‌شده:         <Link href="/settings" shortcut="3">Settings</Link>افزوده‌شده:       </Box>افزوده‌شده:       <Box className="flex-col grow p-1">{children}</Box>افزوده‌شده:     </Box>افزوده‌شده:   );افزوده‌شده: }

ویژگی shortcut یک کلید را به پیوند متصل می‌کند. کلیدهای 1، 2 و 3 را در کنسول فشار دهید؛ در یک برنامه واقعی، URL با فشردن هرکدام تغییر می‌کند.

بازگشت

هوک useRouter() جابه‌جایی بین مسیرها را از داخل کد انجام می‌دهد. در چیدمان، کلید Backspace را به router.back() متصل کنید:

app/layout.tsx+7-2tsx
حذف‌شده: import { Box, Spacer, Text } from "@textjs/app";افزوده‌شده: import { Box, Spacer, Text, useInput } from "@textjs/app";import Link from "@textjs/app/link";حذف‌شده: import { usePathname } from "@textjs/app/navigation";افزوده‌شده: import { usePathname, useRouter } from "@textjs/app/navigation";export default function RootLayout({ children }: { children?: ReactNode }) {  const pathname = usePathname();افزوده‌شده:   const router = useRouter();افزوده‌شده: افزوده‌شده:   useInput((e) => {افزوده‌شده:     if (e.key === "backspace") router.back();افزوده‌شده:   });

بخش‌های پویا

پوشه‌های [id] مقدار خود را در params دریافت می‌کنند:

app/deployments/[id]/page.tsxtsx
import { Text, type PageProps } from "@textjs/app";export default function DeploymentPage({ params }: PageProps<{ id: string }>) {  return <Text bold>{params.id}</Text>;}

در یک میزبان ایستا، بخش‌های پویایی مانند این بخش به بازنویسی مسیر به index.html نیاز دارند. فصل 10 به این موضوع می‌پردازد.

امتحان کنید

این Acme Deploys در پایان فصل است که در DevTools اجرا می‌شود. روی پد کلیک کنید، سپس از کلیدهای زیر استفاده کنید.

▼ 05 · مسیریابی

باز کردن کنسول

⌘⌥J
CtrlShiftJ
⌘⌥K
CtrlShiftK
⌘⌥C

برنامه در DevTools رندر می‌شود.ابتدا گزینهٔ «نمایش قابلیت‌ها برای توسعه‌دهندگان وب» را در تنظیمات Safari ← پیشرفته فعال کنید. سپس اینجا کلیک کنید و 2 را فشار دهید.

باز کردن در رایانه

این برنامه در کنسول DevTools رندر می‌شود که به مرورگر دسکتاپ نیاز دارد.

آزمون

2 پرسش

برای تکمیل فصل به همهٔ پرسش‌ها پاسخ دهید.

کدام فایل در ⁦/deployments⁩ رندر می‌شود؟

 

چه چیزی هنگام جابه‌جایی بین صفحه‌ها حفظ می‌شود؟