NextJS 14 App Router中如何让嵌套组件使用独立布局？

上图为我的App Router结构。

项目存在一个需全局共享的根布局，但login组件内的layout.jsx不应共享该根布局，需要覆盖根布局，仅使用login页面的本地布局。该如何实现？

我尝试按如下方式编写login的布局：

此方案仅部分生效，且存在以下问题：

• 根布局会短暂显示（出现闪烁），之后才会展示login的布局。
• 出现如下错误：
  • 未处理错误1

    未处理运行时错误
    Error: Text content does not match server-rendered HTML.
    Warning: Text content did not match. Server: "Root layout" Client: "Login page"

  • 未处理错误2

    Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

以下为根布局文件，供参考：

我使用的是Next.js 14。

在Next.js 14的App Router中，要让特定路由完全跳过根布局，需通过**路由组（Route Groups）**拆分布局结构，具体步骤如下：

1. 重构路由结构
   将需要共享原根布局的页面放入一个路由组（比如命名为(main)），login页面放在组外。这样原根布局只会作用于(main)组内的页面：

   app/
   ├── (main)/
   │   ├── layout.jsx  # 原根布局，仅作用于(main)组内页面
   │   ├── page.jsx
   │   └── ...  # 其他需要共享根布局的页面
   ├── login/
   │   ├── layout.jsx  # login的独立布局
   │   └── page.jsx
   └── layout.jsx  # 新全局根布局，仅保留最基础结构
   

2. 调整全局根布局
   新的app/layout.jsx只保留最基础的HTML容器结构，不要包含业务布局内容，示例代码：

   export default function RootLayout({ children }) {
     return (
       <html lang="zh-CN">
         <body>{children}</body>
       </html>
     );
   }
   

3. 迁移原根布局到路由组
   将原来的根布局内容完整迁移到(main)/layout.jsx中，这样(main)组内的所有页面会共享该布局，而login页面则完全使用自己的独立布局。

4. 验证效果
   完成上述修改后，访问/login会直接渲染login的布局，不会出现根布局闪烁和hydration错误——因为服务端与客户端渲染的内容完全一致。

内容的提问来源于stack exchange，提问作者emAyush56