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.