如何在react js app的标签页中添加标签组件和加载页面？

import React, { useState } from 'react';

const TabComponent = () => {
  const [activeTab, setActiveTab] = useState(0);

  const handleTabClick = (index) => {
    setActiveTab(index);
  };

  const renderTabContent = () => {
    switch (activeTab) {
      case 0:
        return <HomePage />;
      case 1:
        return <AboutPage />;
      case 2:
        return <ContactPage />;
      default:
        return null;
    }
  };

  return (
    <div>
      <ul>
        <li onClick={() => handleTabClick(0)}>Home</li>
        <li onClick={() => handleTabClick(1)}>About</li>
        <li onClick={() => handleTabClick(2)}>Contact</li>
      </ul>
      <div>{renderTabContent()}</div>
    </div>
  );
};

const HomePage = () => {
  return <h1>Home Page</h1>;
};

const AboutPage = () => {
  return <h1>About Page</h1>;
};

const ContactPage = () => {
  return <h1>Contact Page</h1>;
};

export default TabComponent;