攔截式路由 (Intercepting Routes)

攔截式路由允許您在當前佈局中載入來自應用程式其他部分的路由。當您希望顯示某個路由的內容而不讓使用者切換至不同情境時，此路由模式非常實用。

舉例來說，當點擊動態消息中的照片時，您可以在模態視窗中顯示該照片，覆蓋於動態消息上方。此時 Next.js 會攔截 /photo/123 路由，遮蔽網址並將其覆蓋於 /feed 之上。

然而，當透過點擊可分享連結或重新整理頁面導向照片時，應渲染完整照片頁面而非模態視窗。此時不應發生路由攔截。

命名規則

攔截式路由可使用 (..) 規則定義，此規則類似於相對路徑的 ../ 但用於路由區段。

您可以使用：

• (.) 匹配同層級區段
• (..) 匹配上一層級區段
• (..)(..) 匹配上兩層級區段
• (...) 匹配從根 app 目錄開始的區段

例如，您可以透過建立 (..)photo 目錄來從 feed 區段攔截 photo 區段。

請注意 (..) 規則是基於_路由區段_而非檔案系統。

範例

模態視窗

攔截式路由可與平行路由搭配使用來建立模態視窗。

使用此模式建立模態視窗可解決一些常見問題，讓您能夠：

• 透過 URL 分享模態內容
• 重新整理頁面時保留上下文而非關閉模態視窗
• 在返回導覽時關閉模態而非返回上一路由
• 在前進導覽時重新開啟模態

上例中，photo 區段的路徑可使用 (..) 匹配器，因為 @modal 是_插槽_而非_區段_。這意味著儘管在檔案系統中高了兩層，photo 路由僅比當前區段高一層級。

其他範例包含在頂部導覽列開啟登入模態視窗，同時保有專屬 /login 頁面，或在側邊模態中開啟購物車。

查看範例了解如何搭配攔截式路由與平行路由使用模態視窗。