template.js
template 文件类似于布局,它可以包裹布局或页面。与跨路由持久存在并保持状态的布局不同,模板被赋予唯一的键,这意味着子客户端组件会在导航时重置其状态。
app/template.tsx
export default function Template({ children }: { children: React.ReactNode }) {
return <div>{children}</div>
}

虽然不太常见,但如果您想要以下功能,您可以选择使用模板而不是布局:
- 依赖于
useEffect
(例如,记录页面浏览量) 和useState
(例如,每个页面的反馈表单) 的功能。 - 更改默认框架行为。例如,布局内的 Suspense Boundaries 仅在首次加载布局时显示回退,而在切换页面时则不显示。对于模板,每次导航都会显示回退。
属性
children
(必填)
Template 接受一个 children
属性。例如:
输出
<Layout>
{/* Note that the template is automatically given a unique key. */}
<Template key={routeParam}>{children}</Template>
</Layout>
须知:
版本历史
版本 | 变更 |
---|---|
v13.0.0 | 引入 template 。 |
这有帮助吗?