app/template.tsx

layoutの方はページ感でstteを維持するが、templateの方はページを移動する毎にsteteをリセットする

オプションのファイルで、レイアウトと似ていますが、ナビゲーション時にコンポーネントの新しいインスタンスがマウントされ、ステートは共有されません。入退場時のアニメーションなど、この動作が必要な場合にテンプレートを使用することができます。

意味不

navigationした時に、毎回新しいinstanceを作るので状態は共有されない

layout.tsxとtemplate.tsxが併存しているときの扱いとかわからない

Layoutの子になるらしい

code:tsx

<Layout>

{/* Note that the template is given a unique key. */}

<Template key={routeParam}>{children}</Template>

</Layout>

ユースケース

code:tsx

export default function Template({ children }: { children: React.ReactNode }) {

return <Boundary>{children}</Boundary>;

}

Boundaryをlayout.tsxに書くか、template.tsxに書くかの違い

layoutの方に書くと、初回ロード時のみfallbackする

templateの方に書くと、navigationするたびにfallbackする