如何对react中的不同组件使用不同的头部

import React from 'react';

const Header = () => {
  return (
    <header>
      {/* 网站logo */}
      <img src="logo.png" alt="Logo" />

      {/* 导航菜单 */}
      <nav>
        <ul>
          <li>首页</li>
          <li>关于我们</li>
          <li>联系我们</li>
        </ul>
      </nav>
    </header>
  );
};

export default Header;

import React from 'react';
import Header from './Header';

const HomePage = () => {
  return (
    <div>
      {/* 使用通用头部组件 */}
      <Header />

      {/* 页面内容 */}
      <h1>欢迎来到首页</h1>
      <p>这是首页的内容。</p>
    </div>
  );
};

export default HomePage;

import React from 'react';
import Header from './Header';

const AboutPage = () => {
  return (
    <div>
      {/* 使用通用头部组件 */}
      <Header />

      {/* 页面内容 */}
      <h1>关于我们</h1>
      <p>这是关于我们页面的内容。</p>
    </div>
  );
};

export default AboutPage;