Rutas de Intercepción

Las rutas de intercepción te permiten cargar una ruta desde otra parte de tu aplicación dentro del diseño actual. Este paradigma de enrutamiento puede ser útil cuando deseas mostrar el contenido de una ruta sin que el usuario cambie a un contexto diferente.

Por ejemplo, al hacer clic en una foto en un feed, puedes mostrar la foto en un modal, superponiéndola sobre el feed. En este caso, Next.js intercepta la ruta /photo/123, enmascara la URL y la superpone sobre /feed.

Sin embargo, al navegar a la foto haciendo clic en un enlace compartible o al actualizar la página, se debe renderizar la página completa de la foto en lugar del modal. No debe ocurrir intercepción de ruta en este caso.

Convención

Las rutas de intercepción se pueden definir con la convención (..), que es similar a la convención de rutas relativas ../ pero para segmentos.

Puedes usar:

• (.) para coincidir con segmentos en el mismo nivel
• (..) para coincidir con segmentos un nivel superior
• (..)(..) para coincidir con segmentos dos niveles superiores
• (...) para coincidir con segmentos desde el directorio raíz app

Por ejemplo, puedes interceptar el segmento photo desde dentro del segmento feed creando un directorio (..)photo.

Nota que la convención (..) se basa en segmentos de ruta, no en el sistema de archivos.

Ejemplos

Modales

Las Rutas de Intercepción pueden usarse junto con Rutas Paralelas para crear modales. Esto te permite resolver desafíos comunes al construir modales, como:

• Hacer que el contenido del modal sea compartible mediante una URL.
• Preservar el contexto cuando se actualiza la página, en lugar de cerrar el modal.
• Cerrar el modal al navegar hacia atrás en lugar de ir a la ruta anterior.
• Reabrir el modal al navegar hacia adelante.

Considera el siguiente patrón de UI, donde un usuario puede abrir un modal de foto desde una galería usando navegación del lado del cliente, o navegar directamente a la página de foto desde una URL compartible:

En el ejemplo anterior, la ruta al segmento photo puede usar el comparador (..) ya que @modal es un slot y no un segmento. Esto significa que la ruta photo está solo un nivel de segmento superior, a pesar de estar dos niveles superiores en el sistema de archivos.

Consulta la documentación de Rutas Paralelas para ver un ejemplo paso a paso, o revisa nuestro ejemplo de galería de imágenes.

Nota importante:

• Otros ejemplos podrían incluir abrir un modal de inicio de sesión en una barra de navegación superior mientras también se tiene una página dedicada /login, o abrir un carrito de compras en un modal lateral.