روٹنگ

فائل سسٹم ⁦App Router⁩: لے آؤٹس، صفحات، ڈائنامک سیگمنٹس، Link اور نیویگیشن ہکس۔

⁦App Router⁩، app/ کے فولڈرز کو URLs سے میپ کرتا ہے اور انہیں براؤزر کے ایڈریس بار اور ہسٹری کے ساتھ ہم آہنگ رکھتا ہے۔

صفحات

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⁩ پر اس صفحے میں ترمیم کریں