NextJs（应用程序路由器）应用程序的两种布局

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

我正在使用 NextJs 14（App Router 版本）。我想为主应用程序创建一个登录和注册页面布局以及一个单独的布局。我的根布局看起来像这样

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={rubik.className} >
        <Providers>
          {children}

        </Providers>
        
      </body>
    </html>
  );
}

我在

app/overview

中有另一个布局。现在，如果我为登录和注册页面制作此 RootLayout 布局，它将出现在应用程序布局中。我怎样才能将它分开？我怎样才能有两个不重叠的布局

next.js

1个回答

0
投票

使您的根目录
```
app/layout.tsx
```
为应用程序共享，如下所示：

export default function RootLayout({children}) {
  return (
     <html>
        <body>{children}</body>
     </html>
   )
}

在应用程序中创建一个带有
```
(this-structure)
```
的文件夹，然后将
```
login
```
和
```
register
```
添加到其中。这称为路线组。

app/
- layout.tsx        <-- root layout 

- (auth)/
  - layout.tsx      <-- auth layout 
  - login/page.tsx
  - register/page.tsx
  - ...

- overview
  - layout.tsx      <-- app layout
  - page.tsx
  - about/
    - page.tsx
  - ...

了解更多关于航线组的信息： https://nextjs.org/docs/app/building-your-application/routing/route-groups

最新问题

© www.soinside.com 2019 - 2024. All rights reserved.