如何在独立Header组件中动态显示当前页面标题？

方法1：路径-标题映射表（简单直接，适合小项目） #

创建路径与对应标题的映射对象，通过当前路由路径匹配获取标题。

import { useRouter } from 'next/router'; // Pages Router 用这个导入
// 如果你用 App Router，替换成 import { usePathname } from 'next/navigation';

export default function Header() {
  // Pages Router 用法
  const router = useRouter();
  const currentPath = router.asPath;

  // App Router 用法（替换上面两行）
  // const currentPath = usePathname();

  // 定义所有页面的路径-标题映射
  const routeTitles = {
    '/': '首页',
    '/dashboard': '数据控制台',
    '/profile': '个人中心',
    '/settings': '系统设置',
    // 补充你的其他页面路径和对应标题
  };

  // 匹配当前路径的标题，默认显示"首页"
  const pageTitle = routeTitles[currentPath] || '首页';

  return (
    <header className='header'>
      <h1 className='page-title'>{pageTitle}</h1>
      <div className='header-icons'>
        <div className='header-icon'><Notifications_icon /></div>
        <div className='header-icon'><User_icon /></div>
      </div>
    </header>
  );
}

方法2：React Context 共享标题（支持动态生成标题，适合复杂项目） #

如果页面标题需要根据接口数据或用户操作动态变更，可以用Context在页面组件和Header之间共享标题状态。

1. 创建Context文件：

// context/PageTitleContext.js
import { createContext, useContext, useState } from 'react';

const PageTitleContext = createContext();

export function PageTitleProvider({ children }) {
  const [title, setTitle] = useState('首页');

  return (
    <PageTitleContext.Provider value={{ title, setTitle }}>
      {children}
    </PageTitleContext.Provider>
  );
}

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

2. 在根容器中包裹Provider：

// Pages Router 的 _app.js
import { PageTitleProvider } from '../context/PageTitleContext';

export default function MyApp({ Component, pageProps }) {
  return (
    <PageTitleProvider>
      <Component {...pageProps} />
    </PageTitleProvider>
  );
}

// App Router 的 layout.js
import { PageTitleProvider } from './context/PageTitleContext';

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

3. 在Header组件中读取标题：

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

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

  return (
    <header className='header'>
      <h1 className='page-title'>{title}</h1>
      <div className='header-icons'>
        <div className='header-icon'><Notifications_icon /></div>
        <div className='header-icon'><User_icon /></div>
      </div>
    </header>
  );
}

4. 在页面组件中设置标题：

// 示例：dashboard/page.js
import { usePageTitle } from '../../context/PageTitleContext';
import { useEffect } from 'react';

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

  useEffect(() => {
    // 静态标题直接设置
    setTitle('数据控制台');
    // 如果是动态标题（比如从接口获取）
    // fetch('/api/dashboard-title').then(res => res.json()).then(data => setTitle(data.title));
  }, [setTitle]);

  return <div>控制台内容...</div>;
}

方法3：利用Next.js Metadata（App Router 专属） #

如果用的是App Router，可以通过页面的metadata定义标题，再同步到Header中：

// 页面文件：dashboard/page.js
export const metadata = {
  title: '数据控制台',
};

export default function Dashboard() {
  return <div>控制台内容...</div>;
}

然后在Header组件中同步标题：

import { usePathname, useEffect, useState } from 'next/navigation';

export default function Header() {
  const pathname = usePathname();
  const [pageTitle, setPageTitle] = useState('首页');

  useEffect(() => {
    // 同步页面的metadata标题到Header
    const updateTitle = () => setPageTitle(document.title);
    updateTitle();
    // 监听title标签变化，确保页面切换后同步
    const observer = new MutationObserver(updateTitle);
    observer.observe(document.querySelector('title'), { childList: true });
    
    return () => observer.disconnect();
  }, [pathname]);

  return (
    <header className='header'>
      <h1 className='page-title'>{pageTitle}</h1>
      <div className='header-icons'>
        <div className='header-icon'><Notifications_icon /></div>
        <div className='header-icon'><User_icon /></div>
      </div>
    </header>
  );
}

内容的提问来源于stack exchange，提问作者Mohammad Fadi Al-Nahhas