template.js

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

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

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

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

Свойства

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

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

<Layout>
  {/* Note that the template is given a unique key. */}
  <Template key={routeParam}>{children}</Template>
</Layout>

Важно знать:

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

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