如何在Bootstrap 5+React中点击navbar-brand切换至home-tab

在React项目里直接用Bootstrap原生JS控制标签页容易失效，因为React的DOM渲染是受控的，得用React状态来管理标签的激活状态，具体实现如下：

• 给Navbar组件添加状态，记录当前激活的标签：

  const [activeTab, setActiveTab] = useState('home');
  

• 给Logo（navbar-brand元素）绑定点击事件，将激活状态设置为Home对应的标识：

  <a className="navbar-brand" onClick={() => setActiveTab('home')}>
    你的Logo文本/图片
  </a>
  

• 给每个标签项的nav-link类添加激活状态判断，如果需要配合React Router同步路由，再加上跳转逻辑：

  // 先引入React Router的useNavigate
  import { useNavigate } from 'react-router-dom';
  
  // 在组件内初始化导航方法
  const navigate = useNavigate();
  
  // 标签列表部分代码
  <ul className="nav nav-tabs">
    <li className="nav-item">
      <a 
        className={`nav-link ${activeTab === 'home' ? 'active' : ''}`}
        onClick={() => {
          setActiveTab('home');
          navigate('/'); // 跳转到Home路由
        }}
      >
        Home
      </a>
    </li>
    <li className="nav-item">
      <a 
        className={`nav-link ${activeTab === 'about' ? 'active' : ''}`}
        onClick={() => {
          setActiveTab('about');
          navigate('/about');
        }}
      >
        About
      </a>
    </li>
  </ul>
  

核心原因：Bootstrap原生JS是直接操作DOM修改类名，但React会自主管理DOM更新，原生修改的状态会在React重新渲染时被覆盖，导致标签状态和路由不同步。用React状态控制激活状态，才是符合React思想的正确实现方式。

内容的提问来源于stack exchange，提问作者Rohit