template.js

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

Они полезны, когда вам нужно:

• Пересинхронизировать useEffect при навигации.
• Сбросить состояние дочернего клиентского компонента при навигации. Например, поле ввода.
• Изменить поведение фреймворка по умолчанию. Например, границы Suspense внутри макетов показывают fallback только при первой загрузке, а шаблоны — при каждой навигации.

Соглашение

Шаблон можно определить, экспортировав React-компонент по умолчанию из файла template.js. Компонент должен принимать пропс children.

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

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

С точки зрения вложенности, template.js отображается между макетом и его дочерними элементами. Вот упрощенный вывод:

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

Пропсы

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

Шаблон принимает пропс children.

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

Поведение

• Серверные компоненты: По умолчанию шаблоны являются серверными компонентами.
• Перемонтирование при навигации: Шаблоны автоматически получают уникальный ключ. Переход на новый маршрут вызывает перемонтирование шаблона и его дочерних элементов.
• Сброс состояния: Любой клиентский компонент внутри шаблона сбросит свое состояние при навигации.
• Повторный запуск эффектов: Эффекты, такие как useEffect, будут пересинхронизированы при перемонтировании компонента.
• Сброс DOM: DOM-элементы внутри шаблона полностью пересоздаются.

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