template.js

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

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

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

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

Props

children (必填)

Template 接受 children prop。例如

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

须知:

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

版本历史