ルートの傍受

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

例えば、フィード内の写真をクリックすると、写真をモーダルでオーバーレイ表示できます。この場合、Next.jsは /photo/123 ルートを傍受し、URLをマスクし、/feed の上にオーバーレイします。

しかし、共有可能なURLをクリックしたり、ページをリフレッシュしたりして写真に移動する場合、モーダルではなく写真ページ全体をレンダリングする必要があります。ルートの傍受は行われません。

規約

ルートの傍受は、相対パス規約 ../ に似た (..) 規約で定義できますが、セグメント用です。

以下を使用できます：

例えば、feed セグメント内から photo セグメントを傍受するには、(..)photo ディレクトリを作成します。

注意：(..) 規約はファイルシステムではなく、ルートセグメントに基づいています。

ルートの傍受はパラレルルートと組み合わせてモーダルを作成できます。これにより、モーダル構築時の一般的な課題を解決できます：

クライアントサイドナビゲーションでギャラリーから写真モーダルを開くか、共有可能なURLから直接写真ページに移動できる、以下のUIパターンを考えてみましょう：

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

詳細なステップバイステップの例についてはパラレルルートのドキュメントを、または画像ギャラリーの例を参照してください。

補足：

他の例としては、トップナビバーにログインモーダルを開きながら専用の /login ページを持つこと、またはサイドモーダルにショッピングカートを開くことなどがあります。