拦截路由

拦截路由允许您在当前layout中从app的其他部分加载路由。当您想要显示一个路由的内容而不希望用户切换到不同的上下文时，这种路由范例非常有用。

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

但是，当导航到照片是通过点击 URL 或刷新页面时，整个照片页面应该呈现，而不是模态框。不应发生路由拦截。

约定

拦截路由通过(...)定义，有点类似相对路径../但是仅用于路由 segment。

你可以使用：

• (.)在同一级别匹配路由 segment
• (..)匹配上一级别的路由 segment
• (..)(..)匹配上两级别的路由 segment
• (...)匹配来自根目录的路由 segment

举个例子，你可以通过创建(..)photo目录拦截在 feedsegment 内的photosegment。

注意(..)约定是基于route segment 而不是文件系统的路径。

例子

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

使用这种模式创建模态框可以克服在处理模态框时遇到的一些常见问题，使您能够：

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

在上面的例子中，可以使用(..)匹配photosegment 因为@modal是一个 slot 而不是 segment。

这就意味着photo路由只高出一级 segment，尽管在文件系统上它高出两个级别。

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