Next.js中如何让指定路由不显示根布局中的头部？

核心思路：基于路由路径判断（比组件名称更可靠） #

你之前通过组件名称判断失效，主要原因是生产环境代码压缩会把组件名改成短标识，或者动态导入组件时名称不符合预期。直接根据当前路由路径判断是更稳定的方案，下面分主流框架给出实现：

React Router 实现 #

使用useLocation钩子获取当前路径，定义需要隐藏Header的路径列表：

import { useLocation } from 'react-router-dom';

function RootLayout({ children }) {
  const location = useLocation();
  // 配置不需要显示Header的路由
  const excludeHeaderPaths = ['/login', '/forget-password'];

  return (
    <div className="root-layout">
      {/* 不在排除列表里才渲染Header */}
      {!excludeHeaderPaths.includes(location.pathname) && <Header />}
      <main>{children}</main>
    </div>
  );
}

Next.js 实现 #

App Router（React Server Components 环境） #

需要加'use client'指令，使用usePathname获取当前路径：

'use client';
import { usePathname } from 'next/navigation';
import Header from './components/Header';

export default function RootLayout({ children }) {
  const pathname = usePathname();
  const noHeaderRoutes = ['/login', '/admin/setup'];

  return (
    <html lang="zh-CN">
      <body>
        {!noHeaderRoutes.includes(pathname) && <Header />}
        {children}
      </body>
    </html>
  );
}

Pages Router #

使用useRouter获取当前路由路径：

import { useRouter } from 'next/router';
import Header from '../components/Header';

export default function Layout({ children }) {
  const router = useRouter();
  const excludePaths = ['/login', '/signup'];

  return (
    <div>
      {!excludePaths.includes(router.pathname) && <Header />}
      {children}
    </div>
  );
}

额外提示 #

如果需要匹配多级路由（比如/admin/*），可以用正则表达式判断：

// 匹配所有/admin开头的路由
const isAdminRoute = /^\/admin/.test(location.pathname);
// 然后判断：{!isAdminRoute && <Header />}

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