template.js

template 檔案與 layout (版面配置) 類似，都會包裹每個子版面配置或頁面。不同之處在於，版面配置會跨路由持續存在並保持狀態，而模板會在導航時為每個子項目建立新的實例。

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

雖然較不常見，但在以下情況您可能會選擇使用模板而非版面配置：

• 需要依賴 useEffect 的功能（例如記錄頁面瀏覽）和 useState（例如每頁的反饋表單）。
• 需要變更預設框架行為。例如，版面配置內的 Suspense Boundaries 僅在首次載入版面配置時顯示 fallback，切換頁面時不會顯示。而模板則會在每次導航時顯示 fallback。

Props

children (必填)

模板元件應接受並使用 children prop。template 會渲染在 layout (版面配置) 及其子項目之間。例如：

<Layout>
  {/* 請注意模板會被賦予唯一的 key。 */}
  <Template key={routeParam}>{children}</Template>
</Layout>

須知事項:

• 預設情況下，template 是 Server Component (伺服器元件)，但也可以透過 "use client" 指令作為 Client Component (客戶端元件) 使用。
• 當使用者在共享同一個 template 的路由之間導航時，會掛載元件的新實例、重新建立 DOM 元素、不會保留狀態，且會重新同步效果。

版本歷史