Next.js中如何仅让根Layout.js组件在/mobile路由渲染

方法1：使用usePathname判断路由 #

在Next.js 13+的App Router中，可以通过usePathname钩子获取当前路径，在根Layout里判断路径是否匹配/mobile，再决定是否渲染目标组件。

如果根Layout是服务器组件，需要将判断逻辑抽离为客户端组件：

// app/components/MobileOnlyComponents.jsx
'use client';
import { usePathname } from 'next/navigation';
import MobileComponent1 from './MobileComponent1';
import MobileComponent2 from './MobileComponent2';

export default function MobileOnlyComponents() {
  const pathname = usePathname();
  if (!pathname.startsWith('/mobile')) return null;

  return (
    <>
      <MobileComponent1 />
      <MobileComponent2 />
    </>
  );
}

然后在根Layout中引入这个客户端组件：

// app/layout.js
import MobileOnlyComponents from './components/MobileOnlyComponents';

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

如果根Layout本身就是客户端组件，也可以直接在内部判断：

// app/layout.js
'use client';
import { usePathname } from 'next/navigation';

export default function RootLayout({ children }) {
  const pathname = usePathname();
  const isMobileRoute = pathname.startsWith('/mobile');

  return (
    <html lang="zh-CN">
      <body>
        {isMobileRoute && (
          <>
            <MobileComponent1 />
            <MobileComponent2 />
          </>
        )}
        {children}
      </body>
    </html>
  );
}

方法2：为/mobile路由创建专属子布局 #

更符合App Router设计逻辑的方式是，把/mobile路由专属的组件放在其对应的子布局文件中，根Layout只保留全局通用内容。

根Layout（app/layout.js）：

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        {/* 仅保留全局通用组件，比如全局导航、页脚等 */}
        {children}
      </body>
    </html>
  );
}

/mobile路由的子Layout（app/mobile/layout.js）：

import MobileComponent1 from '../components/MobileComponent1';
import MobileComponent2 from '../components/MobileComponent2';

export default function MobileLayout({ children }) {
  return (
    <>
      <MobileComponent1 />
      <MobileComponent2 />
      {children}
    </>
  );
}

这种方式将路由专属布局与全局布局解耦，代码结构更清晰。

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