Next.js路由布局機制詳解

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

本文主要介紹了Next.js路由布局機制詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

在 Next.js 的 App Router 中，布局文件 (layout.js) 是逐層嵌套的，每一層的 layout 可以繼承上一層的 layout，并通過 children 來渲染下一層的內(nèi)容。這種機制允許頁面和布局之間的內(nèi)容自然遞歸嵌套，形成清晰的層次結(jié)構(gòu)。

個人總結(jié)：在訪問 /dashboard時，繼承父layout，同時children為自身目錄下的page.js。

目錄結(jié)構(gòu)示例

假設(shè)有以下項目目錄結(jié)構(gòu)：

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）。

各層代碼實現(xiàn)

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>
  );
}

功能: 包裹所有子內(nèi)容，提供全局的 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 特有的布局，如側(cè)邊導(dǎo)航欄，渲染其子內(nèi)容。

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 子模塊，添加獨立的布局部分，如模塊標(biāo)題。

4. 頁面內(nèi)容示例

根頁面 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 時，頁面內(nèi)容會逐層嵌套：

第一層 RootLayout 渲染:
- 提供全局的 Header 和 Footer。
- 通過 {children} 包裹下一層（Dashboard layout.js）。
第二層 DashboardLayout 渲染:
- 在全局布局中渲染 Dashboard 的側(cè)邊欄。
- 使用 {children} 包裹下一層（Settings layout.js）。
第三層 SettingsLayout 渲染:
- 在 Dashboard 布局中增加 Settings 的獨特標(biāo)題。
- 使用 {children} 渲染最終的頁面內(nèi)容。
頁面內(nèi)容 SettingsPage 渲染:
- 顯示 Settings 頁面的核心內(nèi)容。

最終結(jié)果

訪問 /dashboard/settings 時的完整 HTML 渲染結(jié)構(gòu)如下：

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