¿Qué son las rutas paralelas e interceptoras?

Question

Accepted Answer

Estas son dos características avanzadas de App Router para diseños de interfaz de usuario sofisticados. Comparten una sintaxis de convención de carpetas. ## Rutas paralelas (@folder) — renderizar múltiples páginas en un diseño Las rutas paralelas permiten que un único diseño renderice **múltiples "slots" de ruta independientes simultáneamente**, cada uno con su propio estado de carga/error. Defines los slots con carpetas `@name`: ```text app/ layout.tsx @team/page.tsx → a slot @analytics/page.tsx → another slot ``` ```tsx // app/layout.tsx — slots are passed as named props export default function Layout({ children, team, // ← @team slot analytics, // ← @analytics slot }: { children: React.ReactNode; team: React.ReactNode; analytics: React.ReactNode }) { return <>

{children} ; } ``` Cada slot navega y carga de forma **independiente** — genial para **paneles de control** donde los paneles se actualizan por separado, o para mostrar dos secciones a la vez. ## Rutas interceptoras ((.)folder) — superponer una ruta sin abandonar la página actual Las rutas interceptoras te permiten "interceptar" una navegación y renderizarla **en el contexto actual** (por ejemplo, un modal) en lugar de una página completa — mientras mantienes una URL real y compartible. ```text app/feed/page.tsx app/feed/(..)photo/[id]/page.tsx → intercepts /photo/[id] when navigated from the feed app/photo/[id]/page.tsx → the full page (on direct visit / refresh) ``` ```text Click a photo in the feed → opens as a MODAL over the feed (intercepted), URL = /photo/123 Refresh or share that URL → renders the FULL photo page (no interception) ``` Los marcadores de intercepción (`(.)` mismo nivel, `(..)` un nivel arriba, `(...)` raíz) controlan qué segmento se intercepta. Este es exactamente cómo funciona el patrón estilo Instagram de "la foto se abre en un modal pero tiene su propia URL". ## Por qué es importante Las rutas paralelas permiten diseños limpios y complejos de múltiples paneles que cargan independientemente (paneles de control); las rutas interceptoras ofrecen el patrón "modal con una URL real" (compartible, seguro para actualizar, amigable con el botón atrás) que de otro modo sería difícil de construir. Son avanzadas, pero resuelven problemas reales de experiencia del usuario — paneles independientes y superposiciones contextuales — que anteriormente requerían un trabajo manual significativo de enrutamiento/estado.