Группы маршрутов (Route Groups)

В директории app вложенные папки обычно соответствуют URL-путям. Однако вы можете пометить папку как Группу маршрутов (Route Group), чтобы исключить её из URL-пути маршрута.

Это позволяет организовать сегменты маршрутов и файлы проекта в логические группы, не влияя на структуру URL-путей.

Группы маршрутов полезны для:

Соглашение

Группа маршрутов создается путем заключения имени папки в круглые скобки: (имяПапки)

Примеры

Организация маршрутов без влияния на URL-путь

Для организации маршрутов без изменения URL создайте группу, чтобы объединить связанные маршруты. Папки в скобках будут исключены из URL (например, (marketing) или (shop)).

Организация маршрутов с помощью групп

Хотя маршруты внутри (marketing) и (shop) имеют одинаковую иерархию URL, вы можете создать разные макеты для каждой группы, добавив файл layout.js в их папки.

Группы маршрутов с несколькими макетами

Подключение макета к определенным сегментам

Чтобы подключить макет к определенным маршрутам, создайте новую группу (например, (shop)) и переместите в неё маршруты, которые должны использовать общий макет (например, account и cart). Маршруты вне группы не будут использовать этот макет (например, checkout).

Группы маршрутов с выборочным подключением макетов

Создание нескольких корневых макетов

Чтобы создать несколько корневых макетов, удалите файл layout.js верхнего уровня и добавьте файл layout.js в каждую группу маршрутов. Это полезно для разделения приложения на секции с совершенно разным интерфейсом. Теги <html> и <body> должны быть добавлены в каждый корневой макет.

Группы маршрутов с несколькими корневыми макетами

В примере выше и (marketing), и (shop) имеют свои собственные корневые макеты.


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

  • Именование групп маршрутов не имеет особого значения, кроме организации. Оно не влияет на URL-путь.
  • Маршруты, включающие группу маршрутов, не должны разрешаться в тот же URL-путь, что и другие маршруты. Например, поскольку группы не влияют на структуру URL, (marketing)/about/page.js и (shop)/about/page.js будут разрешаться в /about и вызывать ошибку.
  • Если вы используете несколько корневых макетов без файла layout.js верхнего уровня, ваш домашний файл page.js должен быть определен в одной из групп маршрутов, например: app/(marketing)/page.js.
  • Переход между несколькими корневыми макетами вызовет полную перезагрузку страницы (в отличие от клиентской навигации). Например, переход с /cart, использующего app/(shop)/layout.js, на /blog, использующий app/(marketing)/layout.js, вызовет полную перезагрузку. Это применяется только к случаю с несколькими корневыми макетами.