Roteamento
Divida o app em rotas com um layout compartilhado, links com atalhos e histórico.
Neste capítulo
- Arquivos são rotas
- Um layout compartilhado
- Voltar
- Segmentos dinâmicos
O App Router mapeia arquivos em app/ para URLs, seguindo as convenções do App Router do Next.js. A barra de endereços e o histórico do navegador ficam sincronizados, então voltar, avançar e links diretos funcionam enquanto a UI é renderizada no console.
Arquivos são rotas
Mova a lista para uma rota própria e adicione uma página de configurações:
app/ layout.tsx page.tsx → /Adicionado: deployments/Adicionado: page.tsx → /deploymentsAdicionado: [id]/page.tsx → /deployments/dpl_8fK2Adicionado: settings/Adicionado: page.tsx → /settingsUm layout compartilhado
layout.tsx envolve todas as páginas e mantém seu estado durante a navegação. Coloque a barra superior e a navegação nele.
Adicionado: import type { ReactNode } from "react";Adicionado: import { Box, Spacer, Text } from "@textjs/app";Adicionado: import Link from "@textjs/app/link";Adicionado: import { usePathname } from "@textjs/app/navigation";Adicionado: Adicionado: export const metadata = { title: { default: "Acme Deploys", template: "%s · Acme" } };Adicionado: Adicionado: export default function RootLayout({ children }: { children?: ReactNode }) {Adicionado: const pathname = usePathname();Adicionado: return (Adicionado: <Box className="flex-col grow">Adicionado: <Box className="flex-row h-1 px-1 gap-2">Adicionado: <Text bold>▼ Acme</Text>Adicionado: <Text color="subtle">{`acme.local${pathname === "/" ? "" : pathname}`}</Text>Adicionado: <Spacer />Adicionado: </Box>Adicionado: <Box className="flex-row h-1 px-1 gap-3">Adicionado: <Link href="/" shortcut="1">Overview</Link>Adicionado: <Link href="/deployments" shortcut="2">Deployments</Link>Adicionado: <Link href="/settings" shortcut="3">Settings</Link>Adicionado: </Box>Adicionado: <Box className="flex-col grow p-1">{children}</Box>Adicionado: </Box>Adicionado: );Adicionado: }shortcut associa uma única tecla ao link. Pressione 1, 2 e 3 no console; a URL de um app real mudaria a cada tecla.
Voltar
useRouter() permite navegar pelo código. Associe Backspace a router.back() no layout:
Removido: import { Box, Spacer, Text } from "@textjs/app";Adicionado: import { Box, Spacer, Text, useInput } from "@textjs/app";import Link from "@textjs/app/link";Removido: import { usePathname } from "@textjs/app/navigation";Adicionado: import { usePathname, useRouter } from "@textjs/app/navigation";export default function RootLayout({ children }: { children?: ReactNode }) { const pathname = usePathname();Adicionado: const router = useRouter();Adicionado: Adicionado: useInput((e) => {Adicionado: if (e.key === "backspace") router.back();Adicionado: });Segmentos dinâmicos
Pastas [id] recebem seu valor em params:
import { Text, type PageProps } from "@textjs/app";export default function DeploymentPage({ params }: PageProps<{ id: string }>) { return <Text bold>{params.id}</Text>;}Em uma hospedagem estática, segmentos dinâmicos como este precisam de uma regra de reescrita para index.html. O capítulo 10 aborda isso.
Experimentar
Este é Acme Deploys ao final do capítulo, rodando no DevTools. Clique na área de entrada e use as teclas abaixo.
Abrir o console
O app renderiza no DevTools.Primeiro ative “Mostrar recursos para desenvolvedores web” em Ajustes do Safari → Avançado. Depois clique aqui e pressione 2.
Abrir em um computador
Este app renderiza no console do DevTools, que precisa de um navegador de computador.
Questionário
2 perguntasResponda a todas as perguntas para concluir o capítulo.