التوجيه

⁦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