React:在带有状态的新选项卡中打开页面

import React, { useState } from 'react';

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

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

  return (
    <div>
      <div className="tab-header">
        <button onClick={() => handleTabClick(0)}>Tab 1</button>
        <button onClick={() => handleTabClick(1)}>Tab 2</button>
        <button onClick={() => handleTabClick(2)}>Tab 3</button>
      </div>
      <div className="tab-content">
        {activeTab === 0 && <Page1 />}
        {activeTab === 1 && <Page2 />}
        {activeTab === 2 && <Page3 />}
      </div>
    </div>
  );
};

const Page1 = () => {
  return <h1>Page 1</h1>;
};

const Page2 = () => {
  return <h1>Page 2</h1>;
};

const Page3 = () => {
  return <h1>Page 3</h1>;
};