रूटिंग

फ़ाइल-सिस्टम 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 पर यह पेज एडिट करें