Продвинутые маршруты: parallel и intercepting
Слоты @, default.tsx, перехваченные маршруты и модалки со своим URL.
Обновлено
Что такое продвинутые маршруты
Кроме обычных маршрутов (Роутинг), в App Router есть два соглашения для сложных интерфейсов:
| Соглашение | Что делает | Классический пример |
|---|---|---|
Parallel routes (@slot) |
рендерит несколько страниц одновременно в одном layout, каждая с независимой навигацией | дашборд с панелями, сайдбар + контент с отдельными состояниями |
Intercepting routes ((.)) |
показывает маршрут в контексте текущей страницы (обычно модалкой), сохраняя настоящий URL | клик по фото в ленте → модалка; обновление по тому же URL → полная страница фото |
Parallel routes — слоты
Папка, начинающаяся с @, — это слот. Он не появляется в URL; его передают родительскому layout как prop.
app/dashboard/layout.tsxполучает children, analytics и teampage.tsx/dashboard — неявный слот children@analytics/page.tsxdefault.tsxчто показать, если у слота нет совпадения
@team/page.tsxdefault.tsx
export default function DashboardLayout({ children, analytics, team }: LayoutProps<'/dashboard'>) {
return (
<div className="grid grid-cols-2 gap-6">
{children}
{analytics}
{team}
</div>
)
}| Деталь | Почему важно |
|---|---|
у каждого слота могут быть свои loading.tsx и error.tsx |
панели загружаются и падают независимо |
default.tsx |
при перезагрузке вложенного маршрута слоты без совпадения показывают default (иначе 404) |
| слоты не влияют на URL | @analytics/views → /dashboard/views |
Подходит и для условного показа: layout выбирает {isAdmin ? admin : user}.
Intercepting routes — модалка с URL
app/feed/page.tsxсписок фото
photo/[id]/page.tsxполная страница фото — при обновлении или прямой ссылке
@modal/default.tsxreturn null — по умолчанию без модалки(.)photo/[id]/page.tsxто же фото, модалкой поверх ленты
layout.tsxрендерит children + modal
| Маркер | Перехватывает сегмент |
|---|---|
(.) |
на том же уровне |
(..) |
на уровень выше |
(..)(..) |
на два уровня выше |
(...) |
от корня app |
Уровни — это сегменты маршрута, а не папки: слоты @modal не считаются.
Поведение:
| Действие | Результат |
|---|---|
клик по <Link href="/photo/7"> в ленте |
URL становится /photo/7, поверх ленты открывается модалка |
| обновление / ссылка, отправленная кому-то | показывается полная страница /photo/7 |
| Назад / закрытие | router.back() — модалка исчезает, лента не тронута |
Ровно так работают фото в Instagram или товары в интернет-магазине.
Когда использовать
- Parallel: интерфейсы с независимыми зонами (дашборд, почта со списком + деталями), вкладки со своим URL.
- Intercepting: модалки, которыми нужно делиться ссылкой (превью товара, фото, вход поверх текущей страницы).
- В остальных случаях — простые маршруты, их легче понять.
Коротко
@slot= страницы, рендерящиеся параллельно, prop у layout, сdefault.tsx.(.)/(..)/(...)= перехваченный маршрут, обычно модалка, с настоящим URL.- Модалка с URL: слот
@modal+ перехваченный маршрут +router.back()при закрытии.