template.js

模板文件与布局 (layout)类似，用于包裹布局或页面。但与跨路由保持状态的布局不同，模板会被赋予唯一键值，这意味着其子级客户端组件 (Client Components) 在导航时会重置状态。

在以下场景中模板非常有用：

• 需要在导航时重新同步 useEffect
• 需要在导航时重置子级客户端组件的状态（例如输入框）
• 需要更改框架默认行为（例如布局中的 Suspense 边界仅在首次加载时显示回退内容，而模板会在每次导航时显示）

约定

通过在 template.js 文件中导出默认的 React 组件来定义模板。该组件应接收 children 属性。

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

在嵌套结构中，template.js 会渲染在布局与其子级之间。以下是简化后的输出：

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

属性

children (必需)

模板接收 children 属性。

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

行为特性

• 服务端组件 (Server Components)：默认情况下模板是服务端组件
• 导航时重新挂载：模板会自动获得唯一键值，导航到新路由会导致模板及其子级重新挂载
• 状态重置：模板内的任何客户端组件在导航时都会重置其状态
• 副作用重新执行：如 useEffect 等副作用会随着组件重新挂载而重新同步
• DOM 重置：模板内的 DOM 元素会被完全重建

版本历史