Группы маршрутов

В каталоге app вложенные папки обычно сопоставляются с путями URL. Однако вы можете пометить папку как группу маршрутов, чтобы предотвратить включение папки в путь URL маршрута.

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

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

Организация маршрутов в группы, например, по разделу сайта, намерению или команде.
Включения вложенных макетов на одном уровне сегмента маршрута:
- Создание нескольких вложенных макетов в одном сегменте, включая несколько корневых макетов
- Добавление макета к подмножеству маршрутов в общем сегменте

Соглашение

Группа маршрутов может быть создана путем обертывания имени папки в скобки: (folderName)

Примеры

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

© 2024 Vercel, Inc.
Licensed under the MIT License.
https://nextjs.org/docs/app/building-your-application/routing/route-groups