拦截路由

拦截路由允许你在当前布局中加载应用程序其他部分的路由。当你想在不切换用户上下文的情况下显示路由内容时,这种路由模式非常有用。

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

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

---

约定

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

你可以使用:

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

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

提示

注意,(..) 约定是基于_路由段_的,而不是文件系统。

---

示例

模态框

拦截路由可以与并行路由一起使用来创建模态框。这允许你解决构建模态框时的常见挑战,例如:

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

考虑以下 UI 模式,用户可以使用客户端导航从图库中打开照片模态框,或直接从可共享的 URL 导航到照片页面:

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

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

提示

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