template.js

template ファイルは、それぞれの子 layout やページを包み込むという点で、layoutと似ています。 routes 間で維持される layout とは異なり、template は 子要素 ごとに新しいインスタンスを作成します。

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

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

それほど一般的ではありませんが、次の場合には layout よりも template を選ぶかもしれません：

• useEffect（例：ページビューの記録）やuseState（例：ページごとのフィードバックフォーム）に依存する機能。
• Default のフレームワークの挙動を変更するため。たとえば、レイアウト内の Suspense Boundaries は、レイアウトが最初にロードされたときにのみフォールバックを表示し、ページを切り替えるときには表示しません。テンプレートの場合、ナビゲーションごとにフォールバックが表示されます。

Props

children (required)

Template component は、children prop を受け入れて使用する必要があります。templateは、layoutとその children の間にレンダリングされます。例えば:

<Layout>
  {/* Note that the template is given a unique key. */}
  <Template key={routeParam}>{children}</Template>
</Layout>

Good to know:

• default 設定では、templateはServer Componentですが、"use client"ディレクティブを通じてClient Componentとしても使用できます。
• ユーザがtemplateを共有する routes 間を移動すると、新しい component のインスタンスがマウントされ、DOM 要素が再作成され、状態は保存されませんし、エフェクトが再同期されます。

Version History