مسیریابی
برنامه را به مسیرهایی با چیدمان مشترک، پیوندهای دارای میانبر و تاریخچه تقسیم کنید.
در این فصل
- فایلها بهعنوان مسیر
- چیدمان مشترک
- بازگشت
- بخشهای پویا
App Router با پیروی از قراردادهای App Router در Next.js، فایلهای app/ را به URLها نگاشت میکند. نوار نشانی و تاریخچه مرورگر همگام میمانند، بنابراین بازگشت، رفتن به جلو و پیوندهای عمیق هنگام رندر رابط کاربری در کنسول کار میکنند.
فایلها بهعنوان مسیر
فهرست را به مسیر خودش منتقل کنید و یک صفحه تنظیمات اضافه کنید:
app/ layout.tsx page.tsx → /افزودهشده: deployments/افزودهشده: page.tsx → /deploymentsافزودهشده: [id]/page.tsx → /deployments/dpl_8fK2افزودهشده: settings/افزودهشده: page.tsx → /settingsچیدمان مشترک
فایل layout.tsx هر صفحه را در بر میگیرد و وضعیت خود را هنگام جابهجایی بین مسیرها حفظ میکند. نوار بالا و ناوبری را در آن قرار دهید.
افزودهشده: 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() متصل کنید:
حذفشده: 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 دریافت میکنند:
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 اجرا میشود. روی پد کلیک کنید، سپس از کلیدهای زیر استفاده کنید.
باز کردن کنسول
برنامه در DevTools رندر میشود.ابتدا گزینهٔ «نمایش قابلیتها برای توسعهدهندگان وب» را در تنظیمات Safari ← پیشرفته فعال کنید. سپس اینجا کلیک کنید و 2 را فشار دهید.
باز کردن در رایانه
این برنامه در کنسول DevTools رندر میشود که به مرورگر دسکتاپ نیاز دارد.
آزمون
2 پرسشبرای تکمیل فصل به همهٔ پرسشها پاسخ دهید.