从应用程序文件夹中的 Next.js 根布局中排除页面
Ali*_*ref 23 javascript reactjs next.js
我有一个根布局/app/layout.tsx和身份验证页面。我希望身份验证页面不要获取根布局，并且我在文件中为它们定义了自定义布局/app/auth/layout.tsx。
但根布局（/app/layout.tsx）包装了自定义布局（/app/auth/layout.tsx）。如何排除身份验证页面和子页面获取根布局？
我尝试将 auth 目录名称放入()as(auth)但不起作用。大多数解决方案适用于Pages Router，不适用于App Router。
我正在使用 Next.js 13.4。
You*_*mar 21
在Next.js 目录中，使用Create React App或Viteapp时，查看根布局为该文件。您的组件应该在那里呈现。这就是为什么它是必需的并且应该定义和标记，正如文档所说：index.htmlhtmlbody
该
app目录必须包含根目录app/layout.js。根布局必须定义<html>和<body>标签。
此外，任何父布局都会包装所有嵌套的路由布局。如果应用程序的不同部分应该不同，您可以使用路由组创建多个根布局：
要创建多个根布局，请删除顶级
layout.js文件，然后layout.js在每个路由组内添加一个文件。这对于将应用程序划分为具有完全不同的 UI 或体验的部分非常有用。<html>需要将 和标签<body>添加到每个根布局中。
在上面的示例中， 和
(marketing)都有(shop)自己的根布局。
例如，您可以替换marketing为general、shop和auth。旁注，路由组的命名除了用于组织之外没有特殊意义。它们不影响 URL 路径。
此外，路由组内的路由不应解析为相同的 URL 路径。例如，由于路由组不会影响 URL 结构，(marketing)/about/page.js因此(shop)/about/page.js会解析/about并导致错误。
| 归档时间： |
|
| 查看次数： |
15443 次 |
| 最近记录： |