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

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

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

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

Соглашение

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

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

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

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

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

Примеры

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

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

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

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

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

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

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

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