Skip to main content

拦截路由

拦截路由允许您在当前布局中加载应用中其它部分的路由。当您希望用户不切换到其它上下文的情况下展示路由内容时，此路由范例非常有用。

例如，当点击源照片时, 能够覆盖源而在模态框中显示照片。在这种情况下，Next.js 拦截 /photo/123路由, 屏蔽 URL, 并将其覆盖在/feed上。

Intercepting routes soft navigation

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

Intercepting routes hard navigation

公约​

可以通过使用(..)约定来定义拦截路由，该约定类似于适用于段的相对路径约定../。

您可以使用:

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

例如, 你能通过创建(..)photo目录拦截feed段中的photo段。

Intercepting routes folder structure

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

例子​

Modals​

拦截路由可以与平衡路由一起使用来创建 modals。这允许您在构建 modals 时解决常见的挑战，例如：

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

请考虑下列 UI 模式, 这里用户可以使用客户端导航打开图库的一张照片, 或直接从可共享的 URL 导航到照片页面：

Intercepting routes modal example