使用按钮onClick在片段之间切换，但底部导航图标不变

import React, { useState } from 'react';

const App = () => {
  const [currentFragment, setCurrentFragment] = useState('home');

  const handleButtonClick = (fragment) => {
    setCurrentFragment(fragment);
  };

  return (
    <div>
      <button onClick={() => handleButtonClick('home')}>Home</button>
      <button onClick={() => handleButtonClick('about')}>About</button>
      <button onClick={() => handleButtonClick('contact')}>Contact</button>

      {currentFragment === 'home' && <Home />}
      {currentFragment === 'about' && <About />}
      {currentFragment === 'contact' && <Contact />}

      <div className="bottom-navigation">
        <Icon name="home" active={currentFragment === 'home'} />
        <Icon name="about" active={currentFragment === 'about'} />
        <Icon name="contact" active={currentFragment === 'contact'} />
      </div>
    </div>
  );
};

const Icon = ({ name, active }) => {
  return (
    <div className={`icon ${active ? 'active' : ''}`}>
      {/* 根据name渲染对应的图标 */}
    </div>
  );
};

const Home = () => {
  return <div>Home Fragment</div>;
};

const About = () => {
  return <div>About Fragment</div>;
};

const Contact = () => {
  return <div>Contact Fragment</div>;
};

export default App;