如何阻止LinkContainer为按钮组件添加active类？

我来给你几个可行的解决方案，帮你解决按钮被加上active类后样式不符合需求的问题：

方法1：手动禁用Login导航项的激活状态 #

LinkContainer提供了isActive属性，你可以通过它手动控制是否添加active类。对于Login按钮所在的导航项，直接让isActive始终返回false，这样不管当前路由是否匹配/login，都不会给对应的NavItem添加激活类：

import { Glyphicon, Nav, NavItem, Button } from 'react-bootstrap'; 
import { LinkContainer } from 'react-router-bootstrap'; 

<Nav>
  <LinkContainer to={'/'} exact>
    <NavItem>
      <Glyphicon glyph='home' /> Home
    </NavItem>
  </LinkContainer>
  <LinkContainer to={'/documents'}>
    <NavItem>
      <Glyphicon glyph='education' /> User Documents
    </NavItem>
  </LinkContainer>
  {/* 修改这里，添加isActive属性 */}
  <LinkContainer to={'/login'} isActive={() => false}>
    <NavItem>
      <Button bsStyle="primary" block>
        <span className='glyphicon glyphicon-log-in'></span>Login
      </Button>
    </NavItem>
  </LinkContainer>
</Nav>

这个方法最直接，完全符合你“不给按钮相关元素加active类”的需求，而且不会影响其他导航项的正常激活状态。

方法2：用CSS重置激活状态下按钮的样式 #

如果你不想修改组件逻辑，也可以通过CSS覆盖active状态下按钮的默认样式，去掉不需要的背景和内边距：

/* 针对Login按钮所在的激活态NavItem内部的按钮 */
.nav-item.active .btn-primary.block {
  background-color: transparent;
  border-color: transparent;
  color: #333; /* 保持文字颜色和未激活时一致，可根据你的需求调整 */
  padding: inherit; /* 继承父元素内边距，避免额外留白 */
}

不过这种方法是全局样式，要注意避免影响其他地方的按钮样式，适合样式需求比较简单的场景。

方法3：直接用路由跳转逻辑替代LinkContainer #

如果Login按钮不需要导航项的激活逻辑，你可以直接使用react-router的useHistory钩子来实现跳转，完全脱离LinkContainer的管理：

import { Glyphicon, Nav, NavItem, Button } from 'react-bootstrap';
import { useHistory } from 'react-router-dom';

// 在你的组件内部获取history对象
const history = useHistory();

<Nav>
  <LinkContainer to={'/'} exact>
    <NavItem>
      <Glyphicon glyph='home' /> Home
    </NavItem>
  </LinkContainer>
  <LinkContainer to={'/documents'}>
    <NavItem>
      <Glyphicon glyph='education' /> User Documents
    </NavItem>
  </LinkContainer>
  {/* 替换成带点击跳转的按钮 */}
  <NavItem>
    <Button 
      bsStyle="primary" 
      block 
      onClick={() => history.push('/login')}
    >
      <span className='glyphicon glyphicon-log-in'></span>Login
    </Button>
  </NavItem>
</Nav>

这种方法彻底避开了LinkContainer的激活类逻辑，适合不需要该导航项有任何激活状态的场景。

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