Перехватывающие маршруты (Intercepting Routes)

Перехватывающие маршруты позволяют загружать маршрут из другой части вашего приложения в текущем макете. Этот подход к маршрутизации полезен, когда вы хотите отобразить содержимое маршрута без переключения пользователя в другой контекст.

Например, при клике на фотографию в ленте вы можете отобразить её в модальном окне поверх ленты. В этом случае Next.js перехватывает маршрут /photo/123, маскирует URL и накладывает его поверх /feed.

Однако при переходе к фотографии по публичной ссылке или при обновлении страницы должна отображаться вся страница фотографии, а не модальное окно. В этом случае перехват маршрута не происходит.

Соглашение

Перехватывающие маршруты определяются с помощью соглашения (..), которое похоже на относительные пути ../, но применяется к сегментам.

Можно использовать:

• (.) для соответствия сегментам того же уровня
• (..) для соответствия сегментам на уровень выше
• (..)(..) для соответствия сегментам на два уровня выше
• (...) для соответствия сегментам от корневой директории app

Например, вы можете перехватить сегмент photo из сегмента feed, создав директорию (..)photo.

Обратите внимание, что соглашение (..) основано на сегментах маршрутов, а не на файловой системе.

Примеры

Модальные окна

Перехватывающие маршруты можно использовать вместе с параллельными маршрутами (Parallel Routes) для создания модальных окон.

Использование этого паттерна для модальных окон решает некоторые распространённые проблемы:

• Содержимое модального окна становится доступным по URL
• Сохраняется контекст при обновлении страницы вместо закрытия модального окна
• Закрытие модального окна при навигации назад вместо перехода к предыдущему маршруту
• Повторное открытие модального окна при навигации вперёд

В приведённом примере путь к сегменту photo использует (..), поскольку @modal является слотом, а не сегментом. Это означает, что маршрут photo находится только на один уровень выше, несмотря на то, что в файловой системе он выше на два уровня.

Другие примеры включают открытие модального окна входа в верхней панели навигации при наличии отдельной страницы /login или открытие корзины покупок в боковом модальном окне.

Посмотреть пример модальных окон с перехватывающими и параллельными маршрутами.