跳到内容

template.js

template 文件类似于布局,它可以包裹布局或页面。与跨路由持久存在并保持状态的布局不同,模板被赋予唯一的键,这意味着子客户端组件会在导航时重置其状态。

app/template.tsx
export default function Template({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>
}
template.js special file

虽然不太常见,但如果您想要以下功能,您可以选择使用模板而不是布局:

  • 依赖于 useEffect (例如,记录页面浏览量) 和 useState (例如,每个页面的反馈表单) 的功能。
  • 更改默认框架行为。例如,布局内的 Suspense Boundaries 仅在首次加载布局时显示回退,而在切换页面时则不显示。对于模板,每次导航都会显示回退。

属性

children (必填)

Template 接受一个 children 属性。例如:

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

须知:

  • 默认情况下,template 是一个服务器组件,但也可以通过 "use client" 指令用作客户端组件
  • 当用户在共享 template 的路由之间导航时,将挂载组件的新实例,重新创建 DOM 元素,保留客户端组件中的状态,并重新同步效果。

版本历史

版本变更
v13.0.0引入 template