Routes d'interception

Les routes d'interception vous permettent de charger une route d'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 change de contexte.

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 une URL partageable ou en actualisant la page, la page complète de la photo doit s'afficher au lieu de la modale. Aucune interception de route ne doit 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 au même niveau
• (..) pour correspondre aux segments un niveau au-dessus
• (..)(..) pour correspondre aux segments deux niveaux au-dessus
• (...) pour correspondre aux segments depuis la racine du répertoire 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. Cela vous permet de résoudre des défis courants lors de la création de modales, tels que :

• 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 de revenir à la route précédente.
• Rouvrir la modale lors d'une navigation avant.

Considérez le modèle d'interface utilisateur suivant, où un utilisateur peut ouvrir une modale photo depuis une galerie en utilisant la navigation côté client, ou naviguer directement vers la page photo depuis une URL partageable :

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

Consultez la documentation des routes parallèles pour un exemple étape par étape, ou voir notre exemple de galerie d'images.

Bon à savoir :

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