layout · PHP/Python/前端/Linux 等等學習筆記

[TOC] ## layout - 子模板嵌套再父模板 ![](https://img.kancloud.cn/aa/9a/aa9aa2b06e06c651b07409e7665c8649_1600x1026.png) ### 普通布局 app/layout.tsx ``` export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( <html lang="en"> <body> {/* Layout UI */} <main>{children}</main> </body> </html> ) } ``` ### 嵌套布局 app/dashboard/layout.tsx ``` export default function DashboardLayout({ children, }: { children: React.ReactNode }) { return <section>{children}</section> } ``` ## template 用法與 layout 相同,也支持嵌套與 layout 的區別 1.重新渲染行為 * template.tsx在每次路由導航時都會重新渲染 * 而layout.tsx在首次加載后會保持狀態，不會重新渲染 2. 常見使用場景： * 需要動畫效果的頁面切換 * 每次路由變化都需要重置的狀態 * 需要重新初始化的第三方庫集成 app/blog/page.tsx ``` export default function BlogPage() { return <div>Blog a </div> } ``` app/blog/template.tsx ``` export default function Template({ children }: { children: React.ReactNode }) { return <div>----{children}----</div> } ``` > 輸出時候就再 Blog a 中添加橫線 ## 修改 Metadata ``` import { Metadata } from "next" export const metadata: Metadata = { title: 'Blog Page', // 瀏覽器表標簽修改為 Blog Page } export default function BlogPage() { return <div>Blog a </div> } ```