模板文件类似于布局，因为它包装着一个布局或页面。与跨路由持久化并保持状态的布局不同，模板被赋予一个唯一的 key，这意味着子级客户端组件在导航时会重置其状态。
当您需要以下情况时，模板会很有用：
- 在导航时重新同步
useEffect。 - 在导航时重置子级客户端组件的状态。例如，一个输入字段。
- 更改默认框架行为。例如，布局内的 Suspense 边界仅在首次加载时显示备用 UI，而模板在每次导航时都会显示它。
约定
可以通过从 template.js 文件导出一个默认的 React 组件来定义模板。该组件应接受一个 children prop。
tsx
export default function Template({ children }: { children: React.ReactNode }) {
return <div>{children}</div>;
}jsx
export default function Template({ children }) {
return <div>{children}</div>;
}在嵌套方面，template.js 会在布局及其子级之间渲染。以下是简化的输出：
jsx
<Layout>
{/* Note that the template is given a unique key. */}
<Template key={routeParam}>{children}</Template>
</Layout>Props
children (必需)
模板接受一个 children prop。
jsx
<Layout>
{/* Note that the template is automatically given a unique key. */}
<Template key={routeParam}>{children}</Template>
</Layout>行为
- 服务器组件：默认情况下，模板是服务器组件。
- 随导航：模板会为其自身的段级别接收一个唯一的 key。当该段（包括其动态参数）发生更改时，它们会重新挂载。较深段内的导航不会重新挂载更高级别的模板。搜索参数不会触发重新挂载。
- 状态重置：模板内的任何客户端组件都会在导航时重置其状态。
- 副作用重新运行：像
useEffect这样的副作用会在组件重新挂载时重新同步。 - DOM 重置：模板内的 DOM 元素会被完全重新创建。
导航和重新挂载期间的模板
本节将说明模板在导航期间的行为方式。它将逐步展示在每次路由更改时哪些模板会重新挂载以及原因。
使用以下项目树：
app
├── about
│ ├── page.tsx
├── blog
│ ├── [slug]
│ │ └── page.tsx
│ ├── page.tsx
│ └── template.tsx
├── layout.tsx
├── page.tsx
└── template.tsx
从 / 开始，React 树大致如下所示。
注意：示例中显示的
key值仅供说明，你的应用程序中的实际值可能有所不同。
jsx
<RootLayout>
{/* app/template.tsx */}
<Template key="/">
<Page />
</Template>
</RootLayout>导航到 /about（第一个段发生更改），根模板的 key 发生更改，它会重新挂载：
jsx
<RootLayout>
{/* app/template.tsx */}
<Template key="/about">
<AboutPage />
</Template>
</RootLayout>导航到 /blog（第一个段发生更改），根模板的 key 发生更改，它会重新挂载，并且博客级别的模板会挂载：
jsx
<RootLayout>
{/* app/template.tsx (root) */}
<Template key="/blog">
{/* app/blog/template.tsx */}
<Template key="/blog">
<BlogIndexPage />
</Template>
</Template>
</RootLayout>在同一第一个段内导航到 /blog/first-post（子段发生更改），根模板的 key 不变，但博客级别的模板的 key 发生更改，它会重新挂载：
jsx
<RootLayout>
{/* app/template.tsx (root) */}
<Template key="/blog">
{/* app/blog/template.tsx */}
{/* remounts because the child segment at this level changed */}
<Template key="/blog/first-post">
<BlogPostPage slug="first-post" />
</Template>
</Template>
</RootLayout>导航到 /blog/second-post（第一个段相同，子段不同），根模板的 key 不变，但博客级别的模板的 key 再次发生更改，它会再次重新挂载：
jsx
<RootLayout>
{/* app/template.tsx (root) */}
<Template key="/blog">
{/* app/blog/template.tsx */}
{/* remounts again due to changed child segment */}
<Template key="/blog/second-post">
<BlogPostPage slug="second-post" />
</Template>
</Template>
</RootLayout>版本历史
| 版本 | 更改 |
|---|---|
v13.0.0 | 引入了 template。 |