Что такое параллельные маршруты и перехватывающие маршруты?

Question

Accepted Answer

Это два продвинутых расширения App Router для сложных макетов пользовательского интерфейса. Они используют один и тот же синтаксис соглашений папок. ## Почему это важно Параллельные маршруты обеспечивают чистую реализацию сложных, независимо загружаемых многопанельных макетов (панели управления); перехватывающие маршруты реализуют паттерн "модальное окно с реальным URL" (общий доступ, безопасное обновление, удобная кнопка назад), который иначе было бы трудно построить. Они продвинуты, но решают реальные проблемы UX — независимые панели и контекстные оверлеи — которые ранее требовали значительной ручной работы с маршрутизацией/состоянием. ## Параллельные маршруты (@folder) — отобразить несколько страниц в одном макете Параллельные маршруты позволяют одному макету **одновременно отображать несколько независимых "слотов" маршрутов**, каждый с собственным состоянием загрузки/ошибки. Слоты определяются с помощью папок `@name`: ```text app/ layout.tsx @team/page.tsx → a slot @analytics/page.tsx → another slot ``` ```tsx // app/layout.tsx — slots are passed as named props export default function Layout({ children, team, // ← @team slot analytics, // ← @analytics slot }: { children: React.ReactNode; team: React.ReactNode; analytics: React.ReactNode }) { return <>

{children} ; } ``` Каждый слот навигирует и загружается **независимо** — отлично подходит для **панелей управления**, где панели обновляются отдельно, или отображения двух разделов одновременно. ## Перехватывающие маршруты ((.)folder) — наложить маршрут без выхода с текущей страницы Перехватывающие маршруты позволяют "перехватить" навигацию и отобразить её **в текущем контексте** (например, модальное окно) вместо полной страницы — при этом сохраняя реальный, общедоступный URL. ```text app/feed/page.tsx app/feed/(..)photo/[id]/page.tsx → intercepts /photo/[id] when navigated from the feed app/photo/[id]/page.tsx → the full page (on direct visit / refresh) ``` ```text Click a photo in the feed → opens as a MODAL over the feed (intercepted), URL = /photo/123 Refresh or share that URL → renders the FULL photo page (no interception) ``` Маркеры перехвата (`(.)` тот же уровень, `(..)` на один уровень выше, `(...)` корень) определяют, какой сегмент перехватывается. Это именно то, как работает паттерн в стиле Instagram "фото открывается в модальном окне, но имеет собственный URL".