拦截路由
拦截路由允许你从当前布局内应用的其他部分加载路由。当你想要显示路由内容而不需要用户切换到不同的上下文时,此路由范例非常有用。
¥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 rootapp
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.