如何为特定路线使用自定义布局

问题描述 投票：0回答：1

我正在使用 Next.JS 开发一个 React Web 应用程序，分为 2 个主要部分，用户端和管理端。我需要为所有管理页面使用不同的布局，但我遇到了一些问题。

这是文件结构：

├─ about-us/
│  └─ page.tsx
├─ admin/
│  ├─ tracking/
│  │  └─ create/
│  │     └─ page.tsx
│  ├─ AdminDashboardClient.tsx
│  ├─ layout.tsx
│  └─ page.tsx
├─ assets/
│  └─ images/
├─ careers/
│  └─ page.tsx
├─ contact/
│  └─ page.tsx
├─ fonts/
│  ├─ GeistMonoVF.woff
│  └─ GeistVF.woff
├─ shipping/
│  └─ page.tsx
├─ track/
│  └─ page.tsx
├─ favicon.ico
├─ globals.css
├─ layout.tsx
└─ page.tsx


admin/layout.tsx
：

import React from 'react'
import Link from 'next/link'
import { Home, Package, Users, Settings } from 'lucide-react'

export const metadata = {
title: 'Admin Dashboard',
description: 'Shipping Company Admin Dashboard',
}

export default function AdminRootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
   <html lang="en">
     <body className="bg-gray-100">
       <div className="flex min-h-screen">
          {/\* Sidebar \*/}

          {/* Main content */}
          <main className="flex-1 overflow-x-hidden overflow-y-auto">
            <div className="container mx-auto px-6 py-8">
              {children}
            </div>
          </main>
        </div>
      </body>
    </html>

)
}


layout.tsx
：

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <Header />
        {children}
        <Footer />
      </body>
    </html>
  );
}

普遍的问题是，除了 

Header
的侧边栏之外，
Footer
和 
admin/layout.tsx
都加载在管理页面中。我相信这也是导致管理页面上出现 
Error: Text content does not match server-rendered HTML.
的原因。标题的行为很奇怪，因为它出现一秒钟，然后被删除

我希望获得管理路线下页面的特定布局

next.js
1个回答
0
投票

解决方案是使用路线段。

通过在布局中使用 

html
或 
body
标签，您可以定义根布局。

您应该只有一种根布局。或者每段一个。但永远不会一个在根部，一个在段中。因此，在这里您将删除 

app/layout
并在每个段中都有一个

来自文档：

创建多个根布局

要创建多个根布局，删除顶级layout.js文件，并在每个根布局中添加一个layout.js文件 路线组。这对于将应用程序分区为有用 具有完全不同的 UI 或体验的部分。这 并且需要将标签添加到每个根布局中。

结构：

  app
    (main)
      about-us
        page.jsx
      page.jsx
      layout.jsx # root layout
    (admin)
        admin
          tracking
            create
              page.jsx
      page.jsx
      layout.jsx # root layout

还可以考虑从根布局中删除可视组件，然后将布局与可视组件嵌套。 看看如何

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.