Next.js 13 App Router：如何基于页面动态更新根布局导航标题

当然可以实现，别在metadata上传props的死胡同里钻了，给你几个实用的解决思路：

方案1：路径匹配（最直接省心） #

如果页面路由和标题的对应关系固定，直接在导航组件里用usePathname判断当前路径，返回对应标题即可。

示例代码：

// app/components/Nav.tsx （记得加'use client'标识为客户端组件）
'use client';

import { usePathname } from 'next/navigation';

export default function Nav() {
  const pathname = usePathname();
  
  // 定义路径与标题的映射表
  const pageTitles: Record<string, string> = {
    '/': '首页',
    '/library': 'Library',
    '/configuration': 'Configuration',
    '/users': '用户管理'
  };

  const currentTitle = pageTitles[pathname] || '默认标题';

  return (
    <nav>
      <h1>{currentTitle}</h1>
      {/* 其他导航元素 */}
    </nav>
  );
}

之后直接在根布局app/layout.tsx里引入这个Nav组件就行，无需传递任何props，它会自动根据当前路径切换标题。

方案2：React Context传递自定义标题 #

如果需要页面自主定义动态标题（比如从接口获取的动态内容），可以用Context实现跨组件传递：

1. 创建标题Context：

// app/context/PageTitleContext.tsx
'use client';

import { createContext, useContext, useState, ReactNode } from 'react';

const PageTitleContext = createContext<{
  title: string;
  setTitle: (title: string) => void;
}>({
  title: '默认标题',
  setTitle: () => {},
});

export function PageTitleProvider({ children }: { children: ReactNode }) {
  const [title, setTitle] = useState('默认标题');
  return (
    <PageTitleContext.Provider value={{ title, setTitle }}>
      {children}
    </PageTitleContext.Provider>
  );
}

export function usePageTitle() {
  return useContext(PageTitleContext);
}

2. 在根布局中包裹Provider：

// app/layout.tsx
import { PageTitleProvider } from './context/PageTitleContext';
import Nav from './components/Nav';

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

3. 导航组件消费Context：

// app/components/Nav.tsx
'use client';

import { usePageTitle } from '../context/PageTitleContext';

export default function Nav() {
  const { title } = usePageTitle();

  return (
    <nav>
      <h1>{title}</h1>
      {/* 其他导航元素 */}
    </nav>
  );
}

4. 页面组件设置标题：

// app/library/page.tsx
'use client';

import { usePageTitle } from '../context/PageTitleContext';
import { useEffect } from 'react';

export default function LibraryPage() {
  const { setTitle } = usePageTitle();

  useEffect(() => {
    setTitle('Library');
    // 若是动态标题（比如从API获取），可在此处更新
    // fetch('/api/library-title').then(res => res.json()).then(data => setTitle(data.title))
  }, [setTitle]);

  return (
    <div>
      {/* 页面内容 */}
    </div>
  );
}

方案3：结合generateMetadata与客户端读取（兼容场景备选） #

如果标题是在服务端generateMetadata中生成的，可以把标题存入自定义meta标签，再在客户端读取：

1. 页面生成metadata：

// app/configuration/page.tsx
export async function generateMetadata() {
  return {
    title: 'Configuration',
    // 添加自定义meta标签供导航组件读取
    other: {
      pageTitle: 'Configuration'
    }
  };
}

2. 导航组件读取meta标签：

// app/components/Nav.tsx
'use client';

import { useEffect, useState } from 'react';

export default function Nav() {
  const [pageTitle, setPageTitle] = useState('默认标题');

  useEffect(() => {
    const updateTitle = () => {
      const metaTag = document.querySelector('meta[name="pageTitle"]');
      if (metaTag) {
        setPageTitle(metaTag.getAttribute('content') || '默认标题');
      }
    };
    
    updateTitle();
    // 监听路由变化更新标题
    window.addEventListener('popstate', updateTitle);
    return () => window.removeEventListener('popstate', updateTitle);
  }, []);

  return (
    <nav>
      <h1>{pageTitle}</h1>
      {/* 其他导航元素 */}
    </nav>
  );
}

这个方案不如前两种优雅，适合需要兼容旧逻辑的场景。

总结：优先选方案1（路径匹配），简单高效；需要动态自定义标题时用方案2（Context）最灵活；方案3作为备选。

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