template.js

Файл template (шаблон) похож на layout тем, что оборачивает каждый дочерний layout или страницу. Однако в отличие от layouts, которые сохраняются между маршрутами и поддерживают состояние, шаблоны создают новый экземпляр для каждого из своих дочерних элементов при навигации.

export default function Template({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>
}

export default function Template({ children }) {
  return <div>{children}</div>
}

Хотя это менее распространено, вы можете выбрать шаблон вместо layout, если вам нужно:

• Функциональность, зависящая от useEffect (например, логирование просмотров страниц) и useState (например, форма обратной связи для каждой страницы).
• Изменить поведение фреймворка по умолчанию. Например, Suspense Boundaries внутри layouts показывают fallback только при первой загрузке Layout, а не при переключении страниц. Для шаблонов fallback показывается при каждой навигации.

Пропсы

children (обязательный)

Компоненты шаблона должны принимать и использовать пропс children. template рендерится между layout и его дочерними элементами. Например:

<Layout>
  {/* Обратите внимание, что шаблону передается уникальный ключ. */}
  <Template key={routeParam}>{children}</Template>
</Layout>

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

• По умолчанию template является серверным компонентом, но также может использоваться как клиентский компонент с помощью директивы "use client".
• Когда пользователь переходит между маршрутами, использующими один и тот же template, монтируется новый экземпляр компонента, DOM-элементы создаются заново, состояние не сохраняется, а эффекты синхронизируются повторно.

История версий