template.js

模板 (template) 文件与 布局 (layout) 类似，都会包裹每个子布局或页面。但与跨路由保持状态的布局不同，模板会在导航时为每个子元素创建新的实例。

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

虽然不常见，但在以下场景中您可能会选择模板而非布局：

• 需要依赖 useEffect（如记录页面访问）和 useState（如每页反馈表单）的功能
• 需要更改框架默认行为。例如，布局中的 Suspense 边界仅在首次加载布局时显示回退内容，而模板会在每次导航时都显示回退内容

属性

children (必填)

模板组件应接收并使用 children 属性。template 会渲染在 布局 (layout) 与其子元素之间。例如：

<Layout>
  {/* 注意模板会被赋予唯一的 key */}
  <Template key={routeParam}>{children}</Template>
</Layout>

须知:

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

版本历史