Перехват маршрутов

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

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

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

Конвенция

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

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

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

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

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

Примеры

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

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

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

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

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

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

Важно знать:

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