如何在单击时引用导航栏中的组件

import React, { useState } from 'react';

// 定义三个简单的组件作为示例
function Home() { return <h2>首页</h2>; }
function About() { return <h2>关于我们</h2>; }
function Contact() { return <h2>联系我们</h2>; }

function App() {
  const [currentPage, setCurrentPage] = useState('Home');

  const renderPage = () => {
    switch (currentPage) {
      case 'Home':
        return <Home />;
      case 'About':
        return <About />;
      case 'Contact':
        return <Contact />;
      default:
        return <Home />;
    }
  };

  return (
    <div>
      <nav>
        <button onClick={() => setCurrentPage('Home')}>首页</button>
        <button onClick={() => setCurrentPage('About')}>关于</button>
        <button onClick={() => setCurrentPage('Contact')}>联系我们</button>
      </nav>
      {renderPage()}
    </div>
  );
}

export default App;