Next.js 14登录路由仍显示根布局组件，如何修复？

在Next.js App Router中，app/layout.tsx是全局根布局，所有路由页面都会自动嵌套在它内部。你直接在根布局中引入Sidebar和Header，导致登录页面也继承了这些组件。要实现登录页面纯净显示，推荐使用路由组来拆分布局，这是App Router官方推荐的优雅方案。

步骤1：简化根布局 #

修改app/layout.tsx，只保留最基础的全局结构，移除Sidebar和Header：

import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Admin Dashboard",
  description: "Created by me",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

步骤2：创建专属路由组布局 #

在app目录下新建(dashboard)路由组文件夹（括号是路由组的标识，不会影响实际路由路径），将需要显示Sidebar和Header的页面（比如首页、仪表盘页面）移入该文件夹。然后在app/(dashboard)/layout.tsx中添加原根布局的侧边栏和头部逻辑：

import Sidebar from "@/app/components/sidebar";
import Header from "@/app/components/header";

export default function DashboardLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <div className="flex min-h-screen bg-[#F9FAFB]">
      <Sidebar />
      <main className="flex-1 min-h-screen ml-1/5 p-4">
        <Header />
        {children}
      </main>
    </div>
  );
}

步骤3：保留登录页面布局 #

你的app/login/layout.tsx无需修改，现在登录页面会直接嵌套在根布局中，不会加载Sidebar和Header，呈现纯净的登录界面。

可选方案：动态路由判断（不推荐） #

如果不想调整目录结构，也可以在根布局中通过路由判断动态渲染组件，但需要将根布局改为客户端组件（添加'use client'指令），且路由增多后逻辑会冗余：

'use client'
import { Inter } from "next/font/google";
import "./globals.css";
import Sidebar from "@/app/components/sidebar";
import Header from "@/app/components/header";
import { usePathname } from "next/navigation";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Admin Dashboard",
  description: "Created by me",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const pathname = usePathname();
  const isLoginPage = pathname === "/login";

  return (
    <html lang="en">
      <body className={inter.className}>
        {!isLoginPage ? (
          <div className="flex min-h-screen bg-[#F9FAFB]">
            <Sidebar />
            <main className="flex-1 min-h-screen ml-1/5 p-4">
              <Header />
              {children}
            </main>
          </div>
        ) : (
          children
        )}
      </body>
    </html>
  );
}

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