拦截路由

截取路由允许你在当前布局中加载应用程序其他部分的路由。当你想要显示某个路由的内容而用户无需切换到不同上下文时，这种路由范式会很有用。

例如，在信息流中点击照片时，你可以在模态框中显示照片，覆盖在信息流之上。在这种情况下，Next.js 会截取 /photo/123 路由，伪装 URL，并将其覆盖在 /feed 上。

然而，当通过可分享的 URL 导航到照片或刷新页面时，应该渲染整个照片页面，而不是模态框。不应发生路由截取。

约定

截取路由可以使用 (..) 约定进行定义，这类似于相对路径约定 ../，但用于路由段。

你可以使用

• (.) 来匹配同一级别的段
• (..) 来匹配上一级别的段
• (..)(..) 来匹配上两级别的段
• (...) 来匹配 app 根目录中的段

例如，你可以通过创建 (..)photo 目录来截取 feed 段中的 photo 段。

需要注意：(..) 约定基于路由段，而不是文件系统。例如，它不考虑并行路由中的 @slot 文件夹。

示例

模态框

截取路由可以与并行路由结合使用来创建模态框。这使你能够解决构建模态框时的常见挑战，例如：

• 通过 URL 分享模态框内容。
• 页面刷新时保留上下文，而不是关闭模态框。
• 向后导航时关闭模态框，而不是回到上一个路由。
• 向前导航时重新打开模态框.

考虑以下 UI 模式，用户可以通过客户端导航从图库打开照片模态框，或者直接从可分享的 URL 导航到照片页面。

在上面的示例中，photo 段的路径可以使用 (..) 匹配器，因为 @modal 是一个插槽而不是一个段。这意味着 photo 路由只高一个段级别，尽管在文件系统中高两个级别。

请参阅并行路由文档以获取分步示例，或查看我们的图像画廊示例。

须知

• 其他示例可能包括在顶部导航栏中打开登录模态框，同时也有一个专门的 /login 页面，或者在侧边模态框中打开购物车。