NextJS中文文档 - Intercepting Routes

拦截路由允许您在当前布局内加载应用程序其他部分的路由。当您希望显示路由内容而不让用户切换到不同上下文时，这种路由模式非常有用。

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

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

约定

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

您可以使用：

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

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

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

示例

模态

拦截路由可以与平行路由结合使用来创建模态。这允许您解决构建模态时的常见挑战，例如：

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

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

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

有关分步示例，请参阅平行路由文档，或查看我们的图片库示例。

需要了解的是：

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