Định tuyến
App Router dựa trên hệ thống tệp: layout, trang, phân đoạn động, Link và hook điều hướng.
App Router ánh xạ thư mục trong app/ sang URL và giữ chúng đồng bộ với thanh địa chỉ và lịch sử của trình duyệt.
Trang
Xuất mặc định một component từ page.tsx:
app/sessions/page.tsxtsx
import { Text } from "@textjs/app";export default function SessionsPage() { return <Text bold>Sessions</Text>;}Layout
Layout bao bọc các route và giữ nguyên trạng thái khi điều hướng.
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> );}Phân đoạn động
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>;}Điều hướng
<Link>
<Link> có thể nhận tiêu điểm và hỗ trợ phím tắt một phím.
| Prop | Mô tả |
|---|---|
href | Đường dẫn đích |
shortcut | Phím để mở liên kết |
replace | Thay thế mục trong lịch sử |
useRouter
Điều hướng từ mã:
const router = useRouter();router.push("/sessions/new");router.back();usePathname và useParams
Đọc route hiện tại:
import { useParams, usePathname } from "@textjs/app/navigation";const pathname = usePathname(); // "/sessions/42"const { id } = useParams<{ id: string }>(); // "42"Quay lại, tiến tới và liên kết sâu đều hoạt động. Trên dịch vụ lưu trữ tĩnh, phân đoạn động cần phương án dự phòng trỏ về index.html. Adapter static tạo phương án này dưới dạng 404.html.