拦截路由

拦截路由允许您在当前布局中从应用程序的另一部分加载路由。 当您希望在不切换到不同上下文的情况下显示路由内容时，这种路由范例可能很有用。

例如，当单击源中的照片时，您可以在模式中显示照片，覆盖源。 在本例中，Next.js 拦截 /photo/123 路由，屏蔽 URL，并将其覆盖在 /feed 上。

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

约定

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

您可以使用：

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

例如，您可以通过创建 (..)photo 目录从信息流段内部拦截photo段。

备注

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

示例

模态框

拦截路由可以与并行路由一起使用，创建模态框。

使用此模式创建模态框克服了在处理模态框时的一些常见挑战，使您能够：

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

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

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

查看带有拦截和并行路由的模态框的示例。