什么是定义布局（Layouts）

1、什么是定义布局（Layouts）

布局就是多个页面共享的 一个UI。

在使用导航的时候，布局会保留状态、保持可交互性并且不会重新渲染，

2、案例：

比如用来实现后台管理系统的侧边导航栏。

3、实操

要定义布局，先新建一个layout.js的文件，

layout.js文件会默认导出一个 React 组件，该组件应接收一个 children prop，chidren 表示子布局或者子页面。

同一文件夹下如果有 layout.js 和 page.js，page 会作为 children 参数传入 layout。

代码如下：

// app/dashboard/layout.js

export default function DashboardLayout({
  children,
}) {
  return (
    <section>
      <nav>nav</nav>
      {children}
    </section>
  )
}

// app/dashboard/page.js


export default function Page() {
  return <h1>Hello, Dashboard!</h1>
}