Enrutamiento
Divide la app en rutas con un layout compartido, enlaces con atajos e historial.
En este capítulo
- Los archivos son rutas
- Un layout compartido
- Volver atrás
- Segmentos dinámicos
El App Router asigna URLs a los archivos de app/ siguiendo las convenciones del App Router de Next.js. La barra de direcciones y el historial del navegador se mantienen sincronizados, por lo que los botones de atrás y adelante y los enlaces profundos funcionan mientras la interfaz se renderiza en la consola.
Los archivos son rutas
Mueve la lista a su propia ruta y añade una página de configuración:
app/ layout.tsx page.tsx → /Añadido: deployments/Añadido: page.tsx → /deploymentsAñadido: [id]/page.tsx → /deployments/dpl_8fK2Añadido: settings/Añadido: page.tsx → /settingsUn layout compartido
layout.tsx envuelve cada página y mantiene su estado durante la navegación. Coloca la barra superior y la navegación en él.
Añadido: import type { ReactNode } from "react";Añadido: import { Box, Spacer, Text } from "@textjs/app";Añadido: import Link from "@textjs/app/link";Añadido: import { usePathname } from "@textjs/app/navigation";Añadido: Añadido: export const metadata = { title: { default: "Acme Deploys", template: "%s · Acme" } };Añadido: Añadido: export default function RootLayout({ children }: { children?: ReactNode }) {Añadido: const pathname = usePathname();Añadido: return (Añadido: <Box className="flex-col grow">Añadido: <Box className="flex-row h-1 px-1 gap-2">Añadido: <Text bold>▼ Acme</Text>Añadido: <Text color="subtle">{`acme.local${pathname === "/" ? "" : pathname}`}</Text>Añadido: <Spacer />Añadido: </Box>Añadido: <Box className="flex-row h-1 px-1 gap-3">Añadido: <Link href="/" shortcut="1">Overview</Link>Añadido: <Link href="/deployments" shortcut="2">Deployments</Link>Añadido: <Link href="/settings" shortcut="3">Settings</Link>Añadido: </Box>Añadido: <Box className="flex-col grow p-1">{children}</Box>Añadido: </Box>Añadido: );Añadido: }shortcut vincula una sola tecla al enlace. Pulsa 1, 2 y 3 en la consola; la URL de una app real cambiaría con cada una.
Volver atrás
useRouter() permite navegar desde el código. Vincula Backspace a router.back() en el layout:
Eliminado: import { Box, Spacer, Text } from "@textjs/app";Añadido: import { Box, Spacer, Text, useInput } from "@textjs/app";import Link from "@textjs/app/link";Eliminado: import { usePathname } from "@textjs/app/navigation";Añadido: import { usePathname, useRouter } from "@textjs/app/navigation";export default function RootLayout({ children }: { children?: ReactNode }) { const pathname = usePathname();Añadido: const router = useRouter();Añadido: Añadido: useInput((e) => {Añadido: if (e.key === "backspace") router.back();Añadido: });Segmentos dinámicos
Las carpetas [id] reciben su valor en params:
import { Text, type PageProps } from "@textjs/app";export default function DeploymentPage({ params }: PageProps<{ id: string }>) { return <Text bold>{params.id}</Text>;}En un alojamiento estático, los segmentos dinámicos como este necesitan una reescritura a index.html. El capítulo 10 lo explica.
Probar
Esta es Acme Deploys al final del capítulo, ejecutándose en DevTools. Haz clic en el panel y usa las teclas de abajo.
Abrir la consola
La app se renderiza en DevTools.Primero activa «Mostrar funciones para desarrolladores web» en Configuración de Safari → Avanzado. Luego haz clic aquí y pulsa 2.
Abrir en un equipo de escritorio
Esta app se renderiza en la consola de DevTools, que requiere un navegador de escritorio.
Cuestionario
2 preguntasResponde todas las preguntas para completar el capítulo.