template.js

Eine Template-Datei ähnelt einem Layout, da sie jedes untergeordnete Layout oder jede Seite umschließt. Im Gegensatz zu Layouts, die über Routen hinweg bestehen bleiben und den Zustand beibehalten, erstellt ein Template für jedes seiner Kinder bei der Navigation eine neue Instanz.

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

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

Obwohl weniger verbreitet, könnten Sie ein Template einem Layout vorziehen, wenn Sie:

• Funktionen benötigen, die auf useEffect basieren (z.B. Protokollierung von Seitenaufrufen) und useState (z.B. ein Feedback-Formular pro Seite).
• Das Standardverhalten des Frameworks ändern möchten. Beispielsweise zeigen Suspense Boundaries innerhalb von Layouts den Fallback nur beim ersten Laden des Layouts an, nicht jedoch beim Seitenwechsel. Bei Templates wird der Fallback bei jeder Navigation angezeigt.

Props

children (erforderlich)

Template-Komponenten sollten einen children-Prop akzeptieren und verwenden. Das template wird zwischen einem Layout und seinen Kindern gerendert. Beispiel:

<Layout>
  {/* Beachten Sie, dass das Template einen eindeutigen Schlüssel erhält. */}
  <Template key={routeParam}>{children}</Template>
</Layout>

Wissenswert:

• Standardmäßig ist template eine Server-Komponente, kann aber auch als Client-Komponente über die "use client"-Direktive verwendet werden.
• Wenn ein Benutzer zwischen Routen navigiert, die ein template gemeinsam nutzen, wird eine neue Instanz der Komponente eingebunden, DOM-Elemente werden neu erstellt, der Zustand wird nicht beibehalten und Effekte werden neu synchronisiert.

Versionsverlauf