Routes d'interception

Les routes d'interception vous permettent de charger une route depuis une autre partie de votre application dans la mise en page actuelle. Ce paradigme de routage peut être utile lorsque vous souhaitez afficher le contenu d'une route sans que l'utilisateur ne bascule vers un contexte différent.

Par exemple, en cliquant sur une photo dans un flux, vous pouvez afficher la photo dans une modale, superposée au flux. Dans ce cas, Next.js intercepte la route /photo/123, masque l'URL et la superpose à /feed.

Cependant, lors de la navigation vers la photo en cliquant sur un URL partageable ou en actualisant la page, la page complète de la photo devrait s'afficher au lieu de la modale. Aucune interception de route ne devrait se produire.

Convention

Les routes d'interception peuvent être définies avec la convention (..), qui est similaire à la convention de chemin relatif ../ mais pour les segments.

Vous pouvez utiliser :

• (.) pour correspondre aux segments du même niveau
• (..) pour correspondre aux segments un niveau au-dessus
• (..)(..) pour correspondre aux segments deux niveaux au-dessus
• (...) pour correspondre aux segments depuis le répertoire racine app

Par exemple, vous pouvez intercepter le segment photo depuis le segment feed en créant un répertoire (..)photo.

Notez que la convention (..) est basée sur les segments de route, pas sur le système de fichiers.

Exemples

Modales

Les routes d'interception peuvent être utilisées avec les routes parallèles pour créer des modales.

L'utilisation de ce motif pour créer des modales surmonte certains défis courants lorsque vous travaillez avec des modales, en vous permettant de :

• Rendre le contenu de la modale partageable via une URL
• Préserver le contexte lorsque la page est actualisée, au lieu de fermer la modale
• Fermer la modale lors d'une navigation arrière plutôt que d'aller à la route précédente
• Rouvrir la modale lors d'une navigation avant

Dans l'exemple ci-dessus, le chemin vers le segment photo peut utiliser le matcher (..) car @modal est un emplacement et non un segment. Cela signifie que la route photo est seulement un segment de niveau supérieur, bien qu'elle soit deux niveaux plus haut dans le système de fichiers.

D'autres exemples pourraient inclure l'ouverture d'une modale de connexion dans une barre de navigation supérieure tout en ayant une page dédiée /login, ou l'ouverture d'un panier d'achat dans une modale latérale.

Voir un exemple de modales avec routes interceptées et parallèles.