NextJS 14.2.11中如何让found.tsx不使用Layout.tsx的头尾组件

方案1：根Layout中基于路由路径的条件渲染 #

直接在根目录的Layout.tsx里通过路由路径判断，决定是否渲染Header和Footer，无需调整现有文件结构。核心是使用next/navigation提供的usePathname钩子获取当前路径，对NotFound页面做特殊处理：

// app/layout.tsx
import { usePathname } from 'next/navigation';
import Header from './Header';
import Footer from './Footer';

export default function RootLayout({ children }) {
  const pathname = usePathname();
  // 判断当前是否为NotFound页面
  const skipLayout = pathname === '/not-found';

  return (
    <html lang="zh-CN">
      <body>
        {!skipLayout && <Header />}
        {children}
        {!skipLayout && <Footer />}
      </body>
    </html>
  );
}

方案2：利用路由组（Route Groups）隔离布局 #

通过路由组将需要Header/Footer的页面和NotFound页面分开，根Layout仅保留最基础的页面结构，路由组内的Layout负责渲染通用组件：

1. 调整目录结构：

   app/
   ├── layout.tsx          # 根Layout（无Header/Footer）
   ├── not-found.tsx
   └── (with-layout)/      # 路由组，包裹需要通用布局的页面
       ├── layout.tsx      # 带Header/Footer的Layout
       ├── page.tsx        # 首页
       └── about/
           └── page.tsx
   

2. 根Layout代码：

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

3. 路由组内的Layout代码：

// app/(with-layout)/layout.tsx
import Header from '../../Header';
import Footer from '../../Footer';

export default function WithLayout({ children }) {
  return (
    <>
      <Header />
      {children}
      <Footer />
    </>
  );
}

方案3：自定义Hook扩展布局控制逻辑 #

如果后续有更多页面需要跳过Header/Footer，可以抽离判断逻辑为自定义Hook，提升代码复用性：

// app/hooks/useShowLayout.ts
import { usePathname } from 'next/navigation';

export function useShowLayout() {
  const pathname = usePathname();
  // 维护需要跳过布局的路径列表
  const excludedPaths = ['/not-found', '/login', '/register'];
  return !excludedPaths.includes(pathname);
}

在根Layout中使用该Hook：

// app/layout.tsx
import { useShowLayout } from './hooks/useShowLayout';
import Header from './Header';
import Footer from './Footer';

export default function RootLayout({ children }) {
  const showLayout = useShowLayout();

  return (
    <html lang="zh-CN">
      <body>
        {showLayout && <Header />}
        {children}
        {showLayout && <Footer />}
      </body>
    </html>
  );
}

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