React Bootstrap导航栏选中标签无法单独高亮问题及修正咨询

你的问题核心在于：所有导航链接共享了同一个bgcolor和textcolor状态，只要触发状态更新，所有标签会同步变色。要实现仅当前选中标签高亮，我们需要跟踪当前激活的标签标识（比如路由路径或标签ID），而非统一控制所有标签的颜色值。下面提供几种可行的解决方案：

方案1：结合React Router路由路径（推荐） #

这种方式能保证页面刷新后，依然根据当前URL保持正确的高亮状态，完全适配单页应用场景：

import React from 'react';
import { Navbar, Container, Nav } from 'react-bootstrap';
import { LogOut } from './LogOut';
import { useLocation } from 'react-router-dom';

const NavbarComponent = () => {
  // 获取当前路由的路径
  const location = useLocation();

  // 辅助函数：根据当前路径判断是否激活，返回对应样式
  const getNavLinkStyle = (targetPath) => {
    const isActive = location.pathname === targetPath;
    return {
      backgroundColor: isActive ? 'white' : 'black',
      color: isActive ? 'black' : 'white'
    };
  };

  return (
    <>
      <Navbar bg="dark" variant="dark" fixed="top" className="nav-pills">
        <Container>
          <Navbar.Brand href="/">Verticals</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link 
              href="/grocery" 
              style={getNavLinkStyle('/grocery')}
            >
              Grocery
            </Nav.Link>
            <Nav.Link 
              href="/fashion" 
              style={getNavLinkStyle('/fashion')}
            >
              Fashion
            </Nav.Link>
            <Nav.Link 
              href="/footwear" 
              style={getNavLinkStyle('/footwear')}
            >
              Footwear
            </Nav.Link>
          </Nav>
        </Container>
      </Navbar>
    </>
  );
};
export default NavbarComponent;

方案2：利用React Bootstrap Nav组件自带的激活机制 #

React Bootstrap的Nav组件原生支持activeKey和自动添加active类，你只需要定义active类的样式即可，代码更简洁：

第一步：修改组件代码 #

import React from 'react';
import { Navbar, Container, Nav } from 'react-bootstrap';
import { LogOut } from './LogOut';
import { useLocation } from 'react-router-dom';

const NavbarComponent = () => {
  const location = useLocation();

  return (
    <>
      <Navbar bg="dark" variant="dark" fixed="top" className="nav-pills">
        <Container>
          <Navbar.Brand href="/">Verticals</Navbar.Brand>
          {/* 用activeKey绑定当前路由路径，Nav会自动给匹配的Link加active类 */}
          <Nav 
            className="me-auto"
            activeKey={location.pathname}
          >
            <Nav.Link href="/grocery">Grocery</Nav.Link>
            <Nav.Link href="/fashion">Fashion</Nav.Link>
            <Nav.Link href="/footwear">Footwear</Nav.Link>
          </Nav>
        </Container>
      </Navbar>
    </>
  );
};
export default NavbarComponent;

第二步：添加CSS样式 #

在你的全局样式文件中定义active类的高亮效果：

.nav-pills .nav-link.active {
  background-color: white;
  color: black;
}

方案3：手动维护激活状态（无路由场景） #

如果你的项目没有使用React Router，可以通过状态手动跟踪选中的标签ID：

import React, { useState } from 'react';
import { Navbar, Container, Nav } from 'react-bootstrap';
import { LogOut } from './LogOut';

const NavbarComponent = () => {
  // 初始激活首页，也可以根据需求修改
  const [activeTab, setActiveTab] = useState('/');

  const getNavLinkStyle = (targetPath) => {
    const isActive = activeTab === targetPath;
    return {
      backgroundColor: isActive ? 'white' : 'black',
      color: isActive ? 'black' : 'white'
    };
  };

  return (
    <>
      <Navbar bg="dark" variant="dark" fixed="top" className="nav-pills">
        <Container>
          <Navbar.Brand 
            href="/" 
            onClick={() => setActiveTab('/')}
          >
            Verticals
          </Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link 
              href="/grocery" 
              onClick={() => setActiveTab('/grocery')}
              style={getNavLinkStyle('/grocery')}
            >
              Grocery
            </Nav.Link>
            <Nav.Link 
              href="/fashion" 
              onClick={() => setActiveTab('/fashion')}
              style={getNavLinkStyle('/fashion')}
            >
              Fashion
            </Nav.Link>
            <Nav.Link 
              href="/footwear" 
              onClick={() => setActiveTab('/footwear')}
              style={getNavLinkStyle('/footwear')}
            >
              Footwear
            </Nav.Link>
          </Nav>
        </Container>
      </Navbar>
    </>
  );
};
export default NavbarComponent;

注意：这种方式在页面刷新后，激活状态会回到初始值，适合非单页应用或不需要持久化状态的场景。

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