ルートのインターセプト

インターセプティングルートを使用すると、アプリケーションの別の部分からルートを現在のレイアウト内に読み込むことができます。このルーティングパラダイムは、ユーザーが別のコンテキストに切り替えることなく、ルートのコンテンツを表示したい場合に便利です。

例えば、フィード内の写真をクリックすると、フィードを重ねてモーダルで写真を表示できます。この場合、Next.jsは/photo/123ルートをインターセプトし、URLをマスクして、/feed上に重ねて表示します。

ただし、共有可能なURLをクリックするか、ページをリフレッシュして写真にナビゲートする場合、モーダルではなく、写真ページ全体がレンダリングされるべきです。ルートのインターセプトは発生しません。

規約

インターセプティングルートは(..)規約を使用して定義でき、これはルートセグメント用の相対パス規約../に似ています。

以下を使用できます：

例えば、feedセグメント内から(..)photoディレクトリを作成することで、photoセグメントをインターセプトできます。

補足： (..)規約は_ルートセグメント_に基づいており、ファイルシステムではありません。例えば、並列ルート内の@slotフォルダは考慮されません。

インターセプティングルートは並列ルートと一緒に使用して、モーダルを作成できます。これにより、モーダル構築時の一般的な課題を解決できます：

ユーザーがクライアント側ナビゲーションを使用してギャラリーから写真モーダルを開くか、共有可能なURLから写真ページに直接ナビゲートできるUIパターンを検討します：

上記の例では、photoセグメントへのパスは(..)マッチャーを使用できます。@modalはセグメントではなくスロットであるためです。これは、ファイルシステムレベルでは2レベル高いにもかかわらず、photoルートが1つのセグメントレベルのみ高いことを意味します。

並列ルートのドキュメントでステップバイステップの例を参照するか、画像ギャラリーの例を参照してください。

補足：

その他の例には、トップナビバーのログインモーダルを開きながら、専用の/loginページを持つ場合や、サイドモーダルでショッピングカートを開く場合が含まれます。