跳到主要内容

template.js

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

当你需要以下功能时，它们很有用：

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

约定​

可以通过从 template.js 文件导出默认 React 组件来定义模板。组件应该接受 children prop。

template.js 特殊文件template.js 特殊文件
app/template.tsx
export default function Template({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>
}

在嵌套方面，template.js 在布局和其子项之间渲染。以下是简化的输出：

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

Props​

children (必需)​

模板接受 children prop。

Output
<Layout>
  {/* 注意模板自动被赋予唯一的键。 */}
  <Template key={routeParam}>{children}</Template>
</Layout>

行为​

  • 服务端组件：默认情况下，模板是服务端组件。
  • 导航时重新挂载：模板自动接收唯一的键。导航到新路由会导致模板及其子项重新挂载。
  • 状态重置：模板内的任何客户端组件在导航时都会重置其状态。
  • 效果重新运行：像 useEffect 这样的效果会在组件重新挂载时重新同步。
  • DOM 重置：模板内的 DOM 元素完全重新创建。

版本历史​

版本变更
v13.0.0引入 template。
最后于 更新