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 URL 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.

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 se pueden usar junto con Rutas Paralelas para crear modales.

Usar este patrón para crear modales supera algunos desafíos comunes cuando se trabaja con modales, permitiéndote:

• Hacer que el contenido del modal sea compartible a través de un 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

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

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.

Ver un ejemplo de modales con Rutas Interceptadas y Paralelas.