拦截路由允许您在当前布局内，从应用程序的另一部分加载一个路由。当您想要显示某个路由的内容，而无需用户切换到不同上下文时，这种路由范式会非常有用。

例如，当在信息流中点击一张照片时，您可以在一个模态框中显示这张照片，并将其叠加在信息流上方。在这种情况下，Next.js 会拦截 /photo/123 路由，掩盖 URL，并将其叠加在 /feed 上方。

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

约定

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

您可以使用：

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

例如，您可以通过创建一个 (..)photo 目录，从 feed 分段内拦截 photo 分段。

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

示例

模态框

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

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

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

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

有关分步示例，请参阅 并行路由 文档，或查看我们的 图片画廊示例。

须知：

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