如何在React本机导航中的选项卡之间切换时保持堆叠屏幕

import React, { useState } from 'react';

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

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

  return (
    <div>
      <ul>
        <li
          onClick={() => handleTabClick(0)}
          className={activeTab === 0 ? 'active' : ''}
        >
          Tab 1
        </li>
        <li
          onClick={() => handleTabClick(1)}
          className={activeTab === 1 ? 'active' : ''}
        >
          Tab 2
        </li>
        <li
          onClick={() => handleTabClick(2)}
          className={activeTab === 2 ? 'active' : ''}
        >
          Tab 3
        </li>
      </ul>

      <div>
        {activeTab === 0 && <TabContent1 />}
        {activeTab === 1 && <TabContent2 />}
        {activeTab === 2 && <TabContent3 />}
      </div>
    </div>
  );
};

const TabContent1 = () => {
  return <div>Tab 1 content</div>;
};

const TabContent2 = () => {
  return <div>Tab 2 content</div>;
};

const TabContent3 = () => {
  return <div>Tab 3 content</div>;
};

export default TabNav;