攔截式路由
攔截式路由允許您在當前佈局中載入來自應用程式其他部分的路由。當您希望顯示某個路由的內容而不讓使用者切換到不同情境時，此路由模式非常有用。
例如，當點擊動態消息中的照片時，您可以在模態框中顯示該照片並覆蓋在動態消息上。此時 Next.js 會攔截 /photo/123 路由、遮蔽網址，並將其覆蓋在 /feed 之上。
然而，當透過可分享連結或重新整理頁面導覽至照片時，應渲染完整的照片頁面而非模態框。此時不應觸發路由攔截。
約定
攔截式路由可使用 (..) 約定來定義，此語法類似於相對路徑的 ../ 但用於路由區段。
您可以使用：
(.)匹配同層級區段(..)匹配上一層級區段(..)(..)匹配上兩層級區段(...)匹配從app目錄根層級開始的區段
例如，您可以透過建立 (..)photo 目錄來從 feed 區段攔截 photo 區段。
請注意
(..)約定是基於「路由區段」而非檔案系統。
範例
模態框
攔截式路由可與平行路由結合使用來建立模態框。這讓您能解決建置模態框時的常見挑戰，例如：
- 讓模態內容可透過網址分享
- 在重新整理頁面時保留上下文而非關閉模態框
- 在返回導覽時關閉模態框而非返回上一路由
- 在前進導覽時重新開啟模態框
考慮以下 UI 模式：使用者可透過客戶端導覽從相簿開啟照片模態框，或直接從可分享連結導覽至照片頁面：
上例中，photo 區段的路徑可使用 (..) 匹配器，因為 @modal 是插槽而非區段。這意味著 photo 路由僅比當前位置高一層區段，儘管在檔案系統中高了兩層。
須知：
- 其他範例可能包含在頂部導覽列開啟登入模態框同時保有專屬
/login頁面，或在側邊欄開啟購物車模態框。