Next.js路由布局机制详解

更新时间：2025年01月15日 09:52:33 作者：困糕

本文主要介绍了Next.js路由布局机制详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

目录结构示例

假设有以下项目目录结构：

app/
  layout.js        // 全局布局
  page.js          // 根页面
  dashboard/
    layout.js      // Dashboard 模块的布局
    page.js        // Dashboard 页面
    settings/
      layout.js    // Dashboard Settings 模块的布局
      page.js      // Dashboard Settings 页面

这里分为三层：

第一层是全局布局和页面（layout.js + page.js）。
第二层是 Dashboard 模块（dashboard/layout.js + dashboard/page.js）。
第三层是 Dashboard Settings 子模块（dashboard/settings/layout.js + dashboard/settings/page.js）。

各层代码实现

1. 第一层：全局 layout.js

// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>Global Header</header>
        <main>{children}</main>
        <footer>Global Footer</footer>
      </body>
    </html>
  );
}

功能: 包裹所有子内容，提供全局的 Header 和 Footer。

2. 第二层：Dashboard 的 layout.js

// app/dashboard/layout.js
export default function DashboardLayout({ children }) {
  return (
    <div>
      <nav>Dashboard Sidebar</nav>
      <div>{children}</div>
    </div>
  );
}

功能: 增加 Dashboard 特有的布局，如侧边导航栏，渲染其子内容。

3. 第三层：Dashboard Settings 的 layout.js

// app/dashboard/settings/layout.js
export default function SettingsLayout({ children }) {
  return (
    <div>
      <h2>Settings Section</h2>
      <div>{children}</div>
    </div>
  );
}

功能: 针对 Settings 子模块，添加独立的布局部分，如模块标题。

4. 页面内容示例

根页面 app/page.js:

export default function HomePage() {
  return <h1>Welcome to the Home Page</h1>;
}

Dashboard 页面 app/dashboard/page.js:

export default function DashboardPage() {
  return <h1>Dashboard Overview</h1>;
}

Dashboard Settings 页面 app/dashboard/settings/page.js:

export default function SettingsPage() {
  return <h1>Settings Content</h1>;
}

渲染流程及继承效果

访问 /dashboard/settings 时，页面内容会逐层嵌套：

第一层 RootLayout 渲染:
- 提供全局的 Header 和 Footer。
- 通过 {children} 包裹下一层（Dashboard layout.js）。
第二层 DashboardLayout 渲染:
- 在全局布局中渲染 Dashboard 的侧边栏。
- 使用 {children} 包裹下一层（Settings layout.js）。
第三层 SettingsLayout 渲染:
- 在 Dashboard 布局中增加 Settings 的独特标题。
- 使用 {children} 渲染最终的页面内容。
页面内容 SettingsPage 渲染:
- 显示 Settings 页面的核心内容。

最终结果

访问 /dashboard/settings 时的完整 HTML 渲染结构如下：

<html lang="en">
  <body>
    <header>Global Header</header>
    <main>
      <div>
        <nav>Dashboard Sidebar</nav>
        <div>
          <h2>Settings Section</h2>
          <div>
            <h1>Settings Content</h1>
          </div>
        </div>
      </div>
    </main>
    <footer>Global Footer</footer>
  </body>
</html>

总结

层层继承: 每层的 layout.js 会通过 children 自动接收并渲染下一层的内容。
灵活设计: 每一层都可以添加自己独特的 UI 元素，同时继承上一层的布局。
自动化管理: Next.js 的 App Router 自动处理布局嵌套逻辑，无需手动传递布局内容。

到此这篇关于Next.js路由布局机制详解的文章就介绍到这了,更多相关Next.js路由布局内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue3中createWebHistory和createWebHashHistory的区别详析
这篇文章主要给大家介绍了关于Vue3中createWebHistory和createWebHashHistory区别的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2023-06-06
Vue中Axios中取消请求及阻止重复请求的方法
为了防止用户在网络不好或者其他情况下短时间内重复进行接口请求，重复发送多次请求，本文主要介绍了Vue中Axios中取消请求及阻止重复请求的方法，感兴趣的可以了解一下
2022-02-02
Vue源码cached解析
最近在写闭包的应用的时候，出现了一个cached函数，来源于Vue源码，利用了闭包变量不会被回收的特点，可以缓存变量，cached本质上是一个高阶函数，它接受一个函数的参数，同时返回一个函数
2022-08-08
uni-app获取当前环境信息的方法
uni-aap提供了异步(uni.getSystemInfo)和同步(uni.getSystemInfoSync)的2个API获取系统信息，这篇文章主要介绍了uni-app获取当前环境信息的相关知识,需要的朋友可以参考下
2022-11-11
利用Vue实现卡牌翻转的特效
这篇文章主要介绍了如何利用Vue实现一个春节抽福卡页面，采用了卡牌翻转的形式。文中的实现方法讲解详细，快跟随小编一起学习一下吧
2022-02-02
Vue3 源码解读之 Teleport 组件使用示例
这篇文章主要为大家介绍了Vue3 源码解读之 Teleport 组件使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
vue+express 构建后台管理系统的示例代码
这篇文章主要介绍了vue+express 构建后台管理系统的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
解决vue3项目中el-menu不兼容SSR问题
这篇文章主要介绍了解决vue3项目中el-menu不兼容SSR问题,需要的朋友可以参考下
2023-12-12
Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
vue elementui form表单验证的实现
这篇文章主要介绍了vue elementui form表单验证的实现,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11