template.js

Eine Template-Datei ähnelt einem Layout, da sie ein Layout oder eine Seite umschließt. Im Gegensatz zu Layouts, die über Routen hinweg bestehen bleiben und ihren Zustand beibehalten, erhalten Templates einen eindeutigen Schlüssel, was bedeutet, dass Client-Komponenten (Client Components) für Kinder ihren Zustand bei der Navigation zurücksetzen.

Sie sind nützlich, wenn Sie:

• useEffect bei der Navigation neu synchronisieren müssen.
• Den Zustand einer untergeordneten Client-Komponente bei der Navigation zurücksetzen müssen. Zum Beispiel ein Eingabefeld.
• Das Standardverhalten des Frameworks ändern möchten. Beispielsweise zeigen Suspense-Grenzen (Suspense boundaries) innerhalb von Layouts nur beim ersten Laden einen Fallback an, während Templates ihn bei jeder Navigation anzeigen.

Konvention

Ein Template kann definiert werden, indem eine standardmäßige React-Komponente aus einer template.js-Datei exportiert wird. Die Komponente sollte eine children-Prop akzeptieren.

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

In Bezug auf die Verschachtelung wird template.js zwischen einem Layout und seinen Kindern gerendert. Hier ist eine vereinfachte Ausgabe:

<Layout>
  {/* Beachten Sie, dass dem Template ein eindeutiger Schlüssel zugewiesen wird. */}
  <Template key={routeParam}>{children}</Template>
</Layout>

Props

children (erforderlich)

Das Template akzeptiert eine children-Prop.

<Layout>
  {/* Beachten Sie, dass dem Template automatisch ein eindeutiger Schlüssel zugewiesen wird. */}
  <Template key={routeParam}>{children}</Template>
</Layout>

Verhalten

• Server-Komponenten (Server Components): Standardmäßig sind Templates Server-Komponenten.
• Neubereitstellung bei Navigation: Templates erhalten automatisch einen eindeutigen Schlüssel. Die Navigation zu einer neuen Route führt dazu, dass das Template und seine Kinder neu bereitgestellt werden.
• Zustandsrücksetzung: Jede Client-Komponente innerhalb des Templates setzt ihren Zustand bei der Navigation zurück.
• Effekt-Neuausführung: Effekte wie useEffect werden neu synchronisiert, wenn die Komponente neu bereitgestellt wird.
• DOM-Rücksetzung: DOM-Elemente innerhalb des Templates werden vollständig neu erstellt.

Versionsverlauf