Next.js 13 App Router：如何在子路由中隐藏根布局指定元素

针对你要在特定子路由（比如/listing）隐藏根布局里的Feed侧边栏，同时保留其他布局元素的需求，这里提供两种实用方案：

方案一：通过路由路径动态判断渲染 #

利用Next.js提供的usePathname钩子获取当前路由路径，根据路径条件渲染Feed侧边栏。

修改根布局layout.tsx：

import { usePathname } from 'next/navigation';
import Feed from './Feed'; // 根据实际路径调整导入
import Navbar from './Navbar';
import Footer from './Footer';
import styles from './layout.module.css';
import { outfit } from './fonts';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const pathname = usePathname();
  // 指定需要隐藏Feed的路由，比如你的Listing页面路径是/listing
  const shouldHideFeed = pathname === '/listing';

  return (
    <html lang="en" className={`${outfit.className} ${styles.html}`}>
      <body className={styles.body}>
        <div className={styles.wrapper}>
          {/* 仅当不是目标路由时渲染Feed侧边栏 */}
          {!shouldHideFeed && (
            <aside className={styles.feed}>
              <Feed />
            </aside>
          )}
          <div className={styles.main}>
            <nav className={styles.nav}>
              <Navbar />
            </nav>
            <main className={styles.children}>{children}</main>
          </div>
        </div>

        <footer className={styles.footer}>
          <Footer />
        </footer>
      </body>
    </html>
  );
}

这种方案适合只有少数几个路由需要隐藏Feed的场景，逻辑简单直接。

方案二：拆分布局结构（更符合App Router设计理念） #

App Router支持嵌套布局，我们可以把根布局拆分为不带Feed的基础布局，再创建一个包含Feed的子布局，让需要显示Feed的路由使用这个子布局，而不需要的路由直接使用基础根布局。

1. 修改根layout.tsx，移除Feed侧边栏：

import Navbar from './Navbar';
import Footer from './Footer';
import styles from './layout.module.css';
import { outfit } from './fonts';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className={`${outfit.className} ${styles.html}`}>
      <body className={styles.body}>
        <div className={styles.wrapper}>
          <div className={styles.main}>
            <nav className={styles.nav}>
              <Navbar />
            </nav>
            <main className={styles.children}>{children}</main>
          </div>
        </div>

        <footer className={styles.footer}>
          <Footer />
        </footer>
      </body>
    </html>
  );
}

2. 创建带Feed的子布局：在项目中新建(with-feed)目录，添加layout.tsx：

import Feed from '../Feed'; // 根据实际路径调整导入
import styles from '../layout.module.css';

export default function WithFeedLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className={styles.wrapper}>
      <aside className={styles.feed}>
        <Feed />
      </aside>
      <div className={styles.main}>
        {children}
      </div>
    </div>
  );
}

3. 调整路由结构：

• 把需要显示Feed的页面（比如首页、详情页等）放到(with-feed)目录下
• 你的Listing页面（page.tsx）保留在根目录下，这样它会直接使用不带Feed的根布局

这种方案更贴合App Router的路由分组设计，适合需要区分“带Feed”和“不带Feed”两类路由的场景，结构更清晰。

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