拦截路由
拦截路由允许你在当前布局内加载应用程序其他部分的路由内容。当你想展示某个路由的内容而不让用户切换到不同上下文时，这种路由模式非常有用。
例如，当点击信息流中的照片时，你可以在模态框中显示该照片并覆盖在信息流上方。这种情况下，Next.js 会拦截 /photo/123 路由，隐藏 URL 并将其覆盖在 /feed 之上。
然而，当通过点击可分享链接或刷新页面导航到照片时，应该渲染整个照片页面而非模态框。此时不会发生路由拦截。
约定
拦截路由可以使用 (..) 约定来定义，这与相对路径约定 ../ 类似，但针对的是路由段。
你可以使用：
(.)匹配同级路由段(..)匹配上一级路由段(..)(..)匹配上两级路由段(...)匹配从根app目录开始的路由段
例如，你可以通过在 feed 段内创建 (..)photo 目录来拦截 photo 段。
注意：
(..)约定基于路由段而非文件系统。
示例
模态框
拦截路由可以与并行路由结合使用来创建模态框。这能帮助你解决构建模态框时的常见挑战，例如：
- 通过 URL 实现模态内容可分享
- 页面刷新时保留上下文而非关闭模态框
- 在后退导航时关闭模态框而非返回上一路由
- 在前进导航时重新打开模态框
考虑以下 UI 模式：用户可以通过客户端导航从相册打开照片模态框，或通过可分享链接直接导航到照片页面：
在上例中，photo 段的路径可以使用 (..) 匹配器，因为 @modal 是一个插槽而非路由段。这意味着尽管文件系统层级上高了两级，但 photo 路由仅高了一个路由段层级。
须知：
- 其他示例可能包括：在顶部导航栏中打开登录模态框同时保留专用
/login页面，或在侧边栏中打开购物车模态框。