Группы маршрутов (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, вызовет полную перезагрузку. Это применяется только к нескольким корневым макетам.