拦截路由允许你在当前布局内加载应用程序其他部分的路由内容。当你想展示某个路由的内容而不让用户切换到不同上下文时，这种路由模式非常有用。

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

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

约定

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

你可以使用：

(.) 匹配同级路由段

(..) 匹配上一级路由段

(..)(..) 匹配上两级路由段

(...) 匹配从根 app 目录开始的路由段

例如，你可以通过在 feed 段内创建 (..)photo 目录来拦截 photo 段。

注意：(..) 约定基于路由段而非文件系统。

示例

模态框

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

通过 URL 实现模态内容可分享

页面刷新时保留上下文而非关闭模态框

在后退导航时关闭模态框而非返回上一路由

在前进导航时重新打开模态框

考虑以下 UI 模式：用户可以通过客户端导航从相册打开照片模态框，或通过可分享链接直接导航到照片页面：

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

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

须知：

其他示例可能包括：在顶部导航栏中打开登录模态框同时保留专用 /login 页面，或在侧边栏中打开购物车模态框。

并行路由在同一视图中同时或条件性渲染多个可独立导航的页面。适用于高度动态的应用程序模式。