ניתוב

⁦App Router⁩ מבוסס מערכת קבצים: רכיבי layout, דפים, מקטעים דינמיים, 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>;}

רכיבי layout

רכיבי layout עוטפים נתיבים ושומרים על המצב שלהם במהלך הניווט.

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