Skip to main content

拦截路由

拦截路由允许你从当前布局内应用的其他部分加载路由。当你想要显示路由内容而不需要用户切换到不同的上下文时，此路由范例非常有用。

¥Intercepting routes allows you to load a route from another part of your application within the current layout. This routing paradigm can be useful when you want to display the content of a route without the user switching to a different context.

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

¥For example, when clicking on a photo in a feed, you can display the photo in a modal, overlaying the feed. In this case, Next.js intercepts the /photo/123 route, masks the URL, and overlays it over /feed.

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

¥However, when navigating to the photo by clicking a shareable URL or by refreshing the page, the entire photo page should render instead of the modal. No route interception should occur.

惯例​

¥Convention

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

¥Intercepting routes can be defined with the (..) convention, which is similar to relative path convention ../ but for segments.

你可以使用：

¥You can use:

  • (.) 匹配同一级别的段

    ¥(.) to match segments on the same level

  • (..) 匹配上一级的段

    ¥(..) to match segments one level above

  • (..)(..) 匹配上面两级的段

    ¥(..)(..) to match segments two levels above

  • (...) 匹配根 app 目录中的段

    ¥(...) to match segments from the root app directory

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

¥For example, you can intercept the photo segment from within the feed segment by creating a (..)photo directory.

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

¥Note that the (..) convention is based on route segments, not the file-system.

示例​

¥Examples

模态​

¥Modals

拦截路由可以与 并行路由 一起使用来创建模态。这使你可以解决构建模式时的常见挑战，例如：

¥Intercepting Routes can be used together with Parallel Routes to create modals. This allows you to solve common challenges when building modals, such as:

  • 使模态内容可通过 URL 共享。

    ¥Making the modal content shareable through a URL.

  • 刷新页面时保留上下文，而不是关闭模式。

    ¥Preserving context when the page is refreshed, instead of closing the modal.

  • 关闭向后导航的模式，而不是转到上一个路由。

    ¥Closing the modal on backwards navigation rather than going to the previous route.

  • 重新打开向前导航的模式。

    ¥Reopening the modal on forwards navigation.

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

¥Consider the following UI pattern, where a user can open a photo modal from a gallery using client-side navigation, or navigate to the photo page directly from a shareable URL:

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

¥In the above example, the path to the photo segment can use the (..) matcher since @modal is a slot and not a segment. This means that the photo route is only one segment level higher, despite being two file-system levels higher.

请参阅 并行路由 文档了解分步示例，或参阅我们的 图片库示例。

¥See the Parallel Routes documentation for a step-by-step example, or see our image gallery example.

很高兴知道：

¥Good to know:

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

    ¥Other examples could include opening a login modal in a top navbar while also having a dedicated /login page, or opening a shopping cart in a side modal.