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

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

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

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

Соглашение

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

Вы можете использовать:

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

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

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

Примеры

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

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

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

Рассмотрим следующий UI-паттерн, где пользователь может открыть фотографию в модальном окне из галереи с помощью клиентской навигации или перейти прямо на страницу фотографии по прямой ссылке:

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

Подробный пример смотрите в документации по Параллельным маршрутам или в нашем примере галереи изображений.

Полезно знать:

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