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

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

碧海醫心

发布： 2025-01-17 08:04:10

原创

960人浏览过

使用 app router 和路由组管理 nextjs 中的多个布局

Next.js 13 的 App Router 引入了诸多令人兴奋的新特性，例如布局、错误边界和加载指示器。然而，管理同一路由级别上的多个布局可能会带来挑战。本文将介绍一种构建和维护整洁、高效布局的最佳实践。

步骤一：创建根布局（可选）

根布局用于定义应用范围内的全局组件或上下文提供程序。如果应用不需要全局配置，则可跳过此步骤。

<code class="javascript">// app/layout.tsx

export default function RootLayout({ children }) {
  return (
    <RootProviders>
      {children}
    </RootProviders>
  );
}</code>

登录后复制

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

假设需要为 /home 和 /contact 页面设置相同的页眉和页脚。 Next.js 的路由组功能可以实现此目标。

例如，创建一个名为 (marketing) 的路由组，并将页面放置其中。 app/(marketing)/home/page.tsx 和 app/(marketing)/contact/page.tsx 等页面将使用 app/(marketing)/layout.tsx 布局。

多个微信小程序源码合集

微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，旨在提供便捷的用户体验，无需下载安装即可在微信内使用。本压缩包包含了丰富的源码资源，涵盖了多个领域的应用场景，下面将逐一介绍其中涉及的知识点。1. 图片展示：这部分源码可能涉及了微信小程序中的``组件的使用，用于显示图片，以及`wx.getSystemInfo`接口获取屏幕尺寸，实现图片的适配和响应式布局。可能还包括了图片懒加

查看详情

<code class="javascript">// app/(marketing)/layout.tsx

export default function MarketingLayout({ children }) {
  return (
    <Providers>
      <main>{children}</main>
    </Providers>
  );
}</code>

登录后复制

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

类似地，对于 /policy 和 /tos 等页面，可以创建一个名为 (legal) 的路由组，并为其定义独立的布局。

<code class="javascript">// app/(legal)/layout.tsx

export default function LegalLayout({ children }) {
  return (
    <main className="container mx-auto">{children}</main>
  );
}</code>

登录后复制