路由
基于文件系统的 App Router：布局、页面、动态路由段、Link 和导航 Hook。
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>
<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 作为回退页面。