template.js

Un fichier template (modèle) est similaire à un layout dans le sens où il englobe un layout ou une page. Contrairement aux layouts qui persistent entre les routes et maintiennent leur état, les templates reçoivent une clé unique, ce qui signifie que les composants clients enfants réinitialisent leur état lors de la navigation.

Ils sont utiles lorsque vous avez besoin de :

• Resynchroniser useEffect lors de la navigation.
• Réinitialiser l'état d'un composant client enfant lors de la navigation. Par exemple, un champ de saisie.
• Modifier le comportement par défaut du framework. Par exemple, les limites Suspense à l'intérieur des layouts n'affichent un fallback qu'au premier chargement, tandis que les templates l'affichent à chaque navigation.

Convention

Un template peut être défini en exportant un composant React par défaut depuis un fichier template.js. Le composant doit accepter une prop children.

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

En termes d'imbrication, template.js est rendu entre un layout et ses enfants. Voici un rendu simplifié :

<Layout>
  {/* Notez que le template reçoit une clé unique. */}
  <Template key={routeParam}>{children}</Template>
</Layout>

Props

children (requis)

Le template accepte une prop children.

<Layout>
  {/* Notez que le template reçoit automatiquement une clé unique. */}
  <Template key={routeParam}>{children}</Template>
</Layout>

Comportement

• Composants serveur : Par défaut, les templates sont des composants serveur.
• Remontage lors de la navigation : Les templates reçoivent automatiquement une clé unique. La navigation vers une nouvelle route entraîne le remontage du template et de ses enfants.
• Réinitialisation d'état : Tout composant client à l'intérieur du template réinitialisera son état lors de la navigation.
• Réexécution des effets : Les effets comme useEffect seront resynchronisés lors du remontage du composant.
• Réinitialisation du DOM : Les éléments DOM à l'intérieur du template sont entièrement recréés.

Historique des versions