라우팅
파일 시스템 기반 App Router: 레이아웃, 페이지, 동적 세그먼트, Link와 탐색 훅.
App Router는 app/의 폴더를 URL에 매핑하고 브라우저의 주소 표시줄 및 방문 기록과 동기화해요.
페이지
page.tsx에서 컴포넌트를 기본으로 내보내세요(export default):
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>는 포커스를 받을 수 있고 단일 키 단축키를 지원해요.
| 속성 | 설명 |
|---|---|
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로 생성해요.