使用 App Router 和路由组管理 Next.js 中的多个布局-js教程-PHP中文网

使用 App Router 和路由组管理 Next.js 中的多个布局

Mary-Kate Olsen

发布： 2025-01-17 02:34:11

原创

564 人浏览过

Managing Multiple Layouts in Next.js with App Router and Route Groups

在 Next.js 13 中，引入了 App Router 以及一些令人兴奋的功能，例如布局、错误边界、加载指示器等。然而，一些开发人员在管理同一路线级别的多个布局时面临挑战。下面，我将向您展示针对此类场景构建和维护干净、方便的布局的最佳方法。

第 1 步：创建根布局（可选）

根布局对于为整个应用程序定义全局组件或上下文提供程序非常有用。不过，如果您的应用不需要全局配置，则可以跳过此步骤。

// app/layout.tsx

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <body>
        <RootProviders>
          {children}
        </RootProviders>
      </body>
    </html>
  );
}

登录后复制

步骤 2：定义特定路由组的布局

假设我们需要 /home 和 /contact 页面的页眉和页脚。为了实现这一点，我们可以使用 Next.js 路由组。

例如，我们将创建一个名为 （营销） 的路由组，并将我们的页面放入其中。像 app/(marketing)/home/page.tsx 和 app/(marketing)/contact/page.tsx 这样的页面将使用 app/(marketing)/layout.tsx 布局。

// app/(marketing)/layout.tsx

export default function MarketingLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <Providers>
      <Header />
      <main>{children}</main>
      <Footer />
    </Providers>
  );
}

登录后复制

步骤 3：为其他路由组创建布局

同样，对于 /policy 和 /tos 这样的页面，我们可以创建一个名为 （合法） 的新路由组，并为其定义特定的布局。

// app/(legal)/layout.tsx

export default function LegalLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <Header />
      <main className="container mx-auto">{children}</main>
    </>
  );
}

登录后复制