مسیریابی

⁦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> قابلیت دریافت فوکوس دارد و از میان‌برهای تک‌کلیدی پشتیبانی می‌کند.

⁦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 می‌نویسد.

ویرایش این صفحه در GitHub