路由
檔案系統 App Router：版面配置、頁面、動態區段、Link 與導覽 Hook。
App Router 將 app/ 中的資料夾對應至網址，並與瀏覽器的網址列和瀏覽記錄保持同步。
頁面
從 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>
<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。