Next.js 13 Beta（App目录）动态修改根布局导航栏的实现疑问

在Next.js 13 App Router中，根布局是持久化的服务器组件，路由切换时不会重新渲染，直接通过params获取路径的思路确实走不通。这里提供两种优雅的实现方式：

方法一：客户端组件+usePathname钩子 #

这是最直接的方案，利用Next.js提供的路由钩子在客户端组件中监听路径变化：

1. 将Navbar改为客户端组件，添加'use client'指令，使用usePathname获取当前路径：

'use client';

import { usePathname } from 'next/navigation';

export default function Navbar() {
  const pathname = usePathname();
  // 提取路径的一级目录，比如/posts得到"posts"，/profile得到"profile"
  const activePage = pathname.split('/')[1] || '首页';

  return (
    <nav className="nav-bar">
      <span>当前页面：{activePage}</span>
      {/* 也可以扩展为导航项高亮逻辑 */}
    </nav>
  );
}

2. 根布局无需传递params，直接引入Navbar即可：

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

优点：实现简单，自动响应路由变化，适合大多数场景；缺点：Navbar变为客户端组件，无法使用服务器组件的特性（如直接访问数据库）。

方法二：子布局传递导航状态 #

如果希望保持Navbar为服务器组件，可以给不同页面组创建专属子布局，在子布局中传递导航状态：

1. 创建/app/posts/layout.tsx：

import Navbar from '@/components/Navbar';

export default function PostsLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <Navbar activeSection="posts" />
      {children}
    </>
  );
}

2. 创建/app/profile/layout.tsx：

import Navbar from '@/components/Navbar';

export default function ProfileLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <Navbar activeSection="profile" />
      {children}
    </>
  );
}

3. Navbar作为服务器组件接收activeSection参数：

export default function Navbar({ activeSection }: { activeSection: string }) {
  return (
    <nav className="nav-bar">
      <span>当前页面：{activeSection}</span>
    </nav>
  );
}

优点：Navbar保持服务器组件特性；缺点：需要为每个页面组创建单独布局，适合页面结构差异较大的场景。

内容的提问来源于stack exchange，提问作者denis-the-menace