template.js

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

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

export default function Template({ children }) {
  return <div>{children}</div>;
}

虽然不太常见，但在以下情况下，你可能会选择使用模板而不是布局：

• 需要依赖 useEffect (例如记录页面访问) 和 useState (例如每页反馈表单) 的功能。
• 想要改变默认的框架行为。例如，布局内的 Suspense 边界只在布局首次加载时显示回退内容，而不是在切换页面时。对于模板，每次导航都会显示回退内容。

属性

children (必需)

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

<Layout>
  {/* 注意，模板会自动获得一个唯一的 key */}
  <Template key={routeParam}>{children}</Template>
</Layout>

值得注意的是：

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

版本历史