インターセプトするルート
ルートのインターセプトを使用すると、現在のレイアウト内でアプリケーションの別の部分からルートをロードできます。このルーティングパラダイムは、ユーザーが異なるコンテキストに切り替えることなくルートのコンテンツを表示したい場合に役立ちます。
例えば、フィード内の写真をクリックすると、フィードの上にモーダルで写真を表示できます。この場合、Next.jsは`/photo/123`ルートをインターセプトし、URLをマスクして、`/feed`の上にオーバーレイします。
ただし、共有可能なURLをクリックして写真に移動したり、ページを更新したりした場合は、モーダルではなく写真ページ全体がレンダリングされるべきです。ルートのインターセプトは発生しません。
規約
インターセプトするルートは、相対パスの規約`../`に似ていますが、セグメントに適用される`(..)`規約で定義できます。
以下を使用できます。
- `(.)` は**同じレベル**のセグメントにマッチします
- `(..)` は**1つ上のレベル**のセグメントにマッチします
- `(..)(..)` は**2つ上のレベル**のセグメントにマッチします
- `(...)` はルートの`app`ディレクトリからのセグメントにマッチします
例えば、`feed`セグメント内から`photo`セグメントをインターセプトするには、`(..)photo`ディレクトリを作成します。
なお、`(..)`規約はファイルシステムではなく、*ルートセグメント*に基づいていることに注意してください。
例
モーダル
インターセプトするルートは、並列ルートと組み合わせてモーダルを作成するために使用できます。これにより、モーダルを構築する際の一般的な課題を解決できます。例えば、
- モーダルのコンテンツを**URL経由で共有可能にする**。
- ページが更新されたときにモーダルを閉じずに、**コンテキストを保持する**。
- 前のルートに進むのではなく、**後方ナビゲーション時にモーダルを閉じる**。
- 前方ナビゲーション時にモーダルを再表示する.
以下のUIパターンを考えてみましょう。ユーザーはクライアントサイドナビゲーションを使用してギャラリーから写真モーダルを開くことも、共有可能なURLから直接写真ページに移動することもできます。
上記の例では、`@modal`がスロットでありセグメントでは**ない**ため、`photo`セグメントへのパスは`(..)`マッチャーを使用できます。これは、`photo`ルートがファイルシステム上では2つ上のレベルにありますが、セグメントレベルでは1つ上のレベルであるという意味です。
段階的な例については、並列ルートのドキュメントを参照するか、画像ギャラリーの例を参照してください。
知っておくと良いこと
- 他の例としては、トップナビゲーションバーでログインモーダルを開きつつ、専用の`/login`ページも持つ場合や、サイドモーダルでショッピングカートを開く場合などがあります。
次のステップ
この情報は役立ちましたか？