NextJS 14 App Router项目中如何条件性显示Navbar

针对你遇到的问题，这里有两种实用的解决方式，均符合App Router的设计逻辑：

方案一：路由分组拆分布局（推荐） #

这是App Router官方推荐的布局拆分方式，通过路由分组将需要Navbar的页面和不需要的页面隔离开，彻底避免逻辑判断。

目录结构调整 #

把需要显示Navbar的页面放到路由分组（括号包裹的目录名，比如(with-navbar)）里，不需要Navbar的页面（如login）放在分组外：

app/
├── (with-navbar)/
│   ├── layout.tsx  # 负责渲染Navbar的布局
│   ├── page.tsx    # 首页
│   ├── dashboard/
│   │   └── page.tsx
│   └── settings/
│       └── page.tsx
├── login/
│   └── page.tsx
└── layout.tsx      # 根布局仅保留全局基础结构

代码实现 #

1. 根layout.tsx（只做最基础的全局包裹）：

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

2. (with-navbar)/layout.tsx（渲染Navbar和子页面内容）：

import Navbar from '@/components/Navbar';

export default function WithNavbarLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <Navbar />
      <main>{children}</main>
    </>
  );
}

这样login页面会直接使用根布局，不会加载Navbar；其他页面则使用带Navbar的分组布局，结构清晰且无额外逻辑。

方案二：通过usePathname判断路由 #

如果只是少数页面需要隐藏Navbar，可以直接在根布局中通过当前路径判断是否渲染Navbar。

代码实现 #

import Navbar from '@/components/Navbar';
import { usePathname } from 'next/navigation';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const pathname = usePathname();
  // 定义不需要显示Navbar的路由列表
  const hideNavbarRoutes = ['/login'];
  const shouldShowNavbar = !hideNavbarRoutes.includes(pathname);

  return (
    <html lang="zh-CN">
      <body>
        {shouldShowNavbar && <Navbar />}
        {children}
      </body>
    </html>
  );
}

后续需要添加更多隐藏路由时，直接修改hideNavbarRoutes数组即可，适合快速实现需求。

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