مسیریابی
App Router مبتنی بر سیستم فایل: چیدمانها، صفحهها، بخشهای پویا، Link و هوکهای ناوبری.
App Router پوشههای داخل app/ را به URLها نگاشت میکند و آنها را با نوار نشانی و تاریخچه مرورگر همگام نگه میدارد.
صفحهها
یک کامپوننت را از فایل page.tsx بهصورت پیشفرض صادر کنید:
app/sessions/page.tsxtsx
import { Text } from "@textjs/app";export default function SessionsPage() { return <Text bold>Sessions</Text>;}چیدمانها
چیدمانها مسیرها را در بر میگیرند و وضعیت خود را هنگام جابهجایی بین مسیرها حفظ میکنند.
app/layout.tsxtsx
import type { ReactNode } from "react";import { Box, Text } from "@textjs/app";import Link from "@textjs/app/link";export const metadata = { title: { default: "Acme", template: "%s · Acme" } };export default function RootLayout({ children }: { children?: ReactNode }) { return ( <Box className="flex-col w-full h-full"> <Box className="flex-row h-1 px-1 gap-2"> <Text bold>▼ Acme</Text> <Link href="/" shortcut="1">Home</Link> <Link href="/sessions" shortcut="2">Sessions</Link> </Box> <Box className="grow">{children}</Box> </Box> );}بخشهای پویا
app/sessions/[id]/page.tsxtsx
import { Text, type PageProps } from "@textjs/app";export default function SessionPage({ params }: PageProps<{ id: string }>) { return <Text>Session {params.id}</Text>;}ناوبری
<Link>
کامپوننت <Link> قابلیت دریافت فوکوس دارد و از میانبرهای تککلیدی پشتیبانی میکند.
| Prop | توضیحات |
|---|---|
href | مسیر مقصد |
shortcut | کلید دنبال کردن پیوند |
replace | جایگزینی ورودی تاریخچه |
useRouter
از طریق کد بین مسیرها جابهجا شوید:
const router = useRouter();router.push("/sessions/new");router.back();usePathname و useParams
مسیر فعلی را بخوانید:
import { useParams, usePathname } from "@textjs/app/navigation";const pathname = usePathname(); // "/sessions/42"const { id } = useParams<{ id: string }>(); // "42"بازگشت، رفتن به جلو و پیوندهای عمیق همگی کار میکنند. در میزبان ایستا، بخشهای پویا باید به فایل index.html برگردند. آداپتور static این مسیر جایگزین را در قالب فایل 404.html مینویسد.