攔截路由

擷取路由允許你在當前佈局中載入應用程式其他部分的路由。當你想要顯示某個路由的內容而使用者無需切換到不同上下文時，這種路由正規化會很有用。

例如，在資訊流中點選照片時，你可以在模態框中顯示照片，覆蓋在資訊流之上。在這種情況下，Next.js 會擷取 /photo/123 路由，偽裝 URL，並將其覆蓋在 /feed 上。

然而，當透過可分享的 URL 導航到照片或重新整理頁面時，應該渲染整個照片頁面，而不是模態框。不應發生路由擷取。

約定

擷取路由可以使用 (..) 約定進行定義，這類似於相對路徑約定 ../，但用於路由段。

你可以使用

• (.) 來匹配同一級別的段
• (..) 來匹配上一級別的段
• (..)(..) 來匹配上兩級別的段
• (...) 來匹配 app 根目錄中的段

例如，你可以透過建立 (..)photo 目錄來擷取 feed 段中的 photo 段。

需要注意：(..) 約定基於路由段，而不是檔案系統。例如，它不考慮並行路由中的 @slot 資料夾。

示例

模態框

擷取路由可以與並行路由結合使用來建立模態框。這使你能夠解決構建模態框時的常見挑戰，例如：

• 透過 URL 分享模態框內容。
• 頁面重新整理時保留上下文，而不是關閉模態框。
• 向後導航時關閉模態框，而不是回到上一個路由。
• 向前導航時重新開啟模態框.

考慮以下 UI 模式，使用者可以透過客戶端導航從相簿開啟照片模態框，或者直接從可分享的 URL 導航到照片頁面。

在上面的示例中，photo 段的路徑可以使用 (..) 匹配器，因為 @modal 是一個插槽而不是一個段。這意味著 photo 路由只高一個段級別，儘管在檔案系統中高兩個級別。

請參閱並行路由文件以獲取分步示例，或檢視我們的影像畫廊示例。

須知

• 其他示例可能包括在頂部導航欄中開啟登入模態框，同時也有一個專門的 /login 頁面，或者在側邊模態框中開啟購物車。