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> } ```