template.js

模板 (template) 檔案與 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 元素會完全重新建立

版本歷史