如何在react导航中创建一个“伪”选项卡，该选项卡不导航到组件，而只是被视为活动的。

import React, { useState } from 'react';
import { Link } from 'react-router-dom';

const Navbar = () => {
  const [activeTab, setActiveTab] = useState('tab1');

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

  return (
    <div>
      <ul>
        <li>
          <Link
            to="/"
            className={activeTab === 'tab1' ? 'active' : ''}
            onClick={() => handleTabClick('tab1')}
          >
            Tab 1
          </Link>
        </li>
        <li>
          <Link
            to="/"
            className={activeTab === 'tab2' ? 'active' : ''}
            onClick={() => handleTabClick('tab2')}
          >
            Tab 2
          </Link>
        </li>
        <li>
          <Link
            to="/"
            className={activeTab === 'tab3' ? 'active' : ''}
            onClick={() => handleTabClick('tab3')}
          >
            Tab 3
          </Link>
        </li>
      </ul>

      {activeTab === 'tab1' && <Component1 />}
      {activeTab === 'tab2' && <Component2 />}
      {activeTab === 'tab3' && <Component3 />}
    </div>
  );
};

export default Navbar;