ReactJS项目Navbar激活状态CSS样式不生效问题咨询

问题根因 #

1. 错误使用了Link组件：react-router-dom中仅NavLink组件支持自动匹配当前路由、添加激活类名的能力，普通Link组件没有该功能。
2. 属性命名错误：即使是v5版本的react-router-dom，激活类名属性是驼峰命名的activeClassName，你写的全小写activeclassname属于无效prop，无法被识别。
3. 缺少路由上下文：你仅导入了BrowserRouter但没有在应用外层包裹，路由匹配逻辑没有运行的上下文环境，自然无法判断当前激活的路由。

解决步骤 #

• 第一步：替换Link为NavLink
  修改导入语句，将Link替换为NavLink：

import {NavLink, BrowserRouter as Router} from 'react-router-dom';

• 第二步：修正导航标签写法
  如果是react-router-dom v6版本，默认会给激活的NavLink自动添加active类，无需额外传属性，直接修改标签即可：

<NavLink to="/grocery">Grocery</NavLink>

如果是react-router-dom v5版本，需要传入驼峰命名的activeClassName属性：

<NavLink activeClassName="active" to="/grocery">Grocery</NavLink>

• 第三步：确保全局包裹路由组件
  在你的应用入口文件（一般是index.js或者App.js）外层用BrowserRouter包裹整个应用，示例：

import { BrowserRouter as Router } from 'react-router-dom';
import NavbarComponent from './Navbar';

function App() {
  return (
    <Router>
      <NavbarComponent />
      {/* 其他路由页面组件 */}
    </Router>
  )
}

补充说明 #

你代码中导入的react-bootstrap相关组件未被使用，属于冗余代码可以直接删除，不影响当前功能运行。

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