template.js

Eine Vorlage ist ähnlich wie ein Layout, indem sie ein Layout oder eine Seite umschließt. Im Gegensatz zu Layouts, die über Routen hinweg bestehen und den Zustand beibehalten, erhalten Vorlagen einen eindeutigen Schlüssel, was bedeutet, dass untergeordnete Client-Komponenten ihren Zustand bei der Navigation zurücksetzen.

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

Obwohl weniger häufig, könnten Sie sich entscheiden, eine Vorlage anstelle eines Layouts zu verwenden, wenn Sie:

• Funktionen benötigen, die sich auf useEffect (z.B. Seitenaufrufe protokollieren) und useState (z.B. ein seitenspezifisches Feedback-Formular) stützen.
• Das Standardverhalten des Frameworks ändern möchten. Beispielsweise zeigen Suspense-Grenzen in Layouts den Fallback nur beim ersten Laden des Layouts und nicht beim Seitenwechsel. Bei Vorlagen wird der Fallback bei jeder Navigation angezeigt.

Props

children (erforderlich)

Eine Vorlage akzeptiert eine children-Prop. Zum Beispiel:

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

Hinweis:

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

Versionshistorie