拦截路由

拦截路由允许你在当前布局内加载来自应用其他部分的路由。当需要在不切换用户上下文的情况下展示路由内容时，这种路由范式非常有用。

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

但当通过可分享链接访问照片或刷新页面时，应渲染完整的照片页面而非模态框。此时不应触发路由拦截。

约定

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

你可以使用：

• (.) 匹配同级路由段
• (..) 匹配上一级路由段
• (..)(..) 匹配上两级路由段
• (...) 匹配从根 app 目录开始的路由段

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

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

示例

模态框

拦截路由可与并行路由结合创建模态框。

使用此模式创建模态框能解决一些常见问题：

• 通过 URL 实现模态内容可分享
• 页面刷新时保留上下文而非关闭模态框
• 后退导航时关闭模态框而非返回上一路由
• 前进导航时重新打开模态框

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

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

查看结合拦截路由与并行路由的模态框示例。