从LinkContainer中删除活动类

Question

在我的反应应用程序中，我有登录和退出的按钮。退出并不是什么大问题，因为它从未激活过。当使用LinkContainer（很棒）时，它会在选择该路由时添加活动类active。这对除buttons之外的所有内容都很有用。当它将`active class'添加到我的按钮时，它会在按钮后面添加一个填充的背景颜色。我不希望这样。现在是代码和图像：

这是代码：

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>
    <LinkContainer to={'/login'}>
        <NavItem>
            <Button bsStyle="primary" block>
                <span className='glyphicon glyphicon-log-in'></span>Login
            </Button>
        </NavItem>
    </LinkContainer>
</Nav>

我希望它能在除按钮之外的所有内容上设置该活动类。

使用react-bootstrap和react-router-bootstrap

Answer 1

查看了react-router-bootstrap上的代码以及一些不同的文章和帖子后，我发现了它。

我不得不改变：

<LinkContainer to={'/login'}>
    <NavItem>
        <Button bsStyle="primary" block>
            <span className='glyphicon glyphicon-log-in'></span>Login
        </Button>
    </NavItem>
</LinkContainer>

要：

    <LinkContainer to={'/login'} activeClassName="">
        <NavItem>
            <Button bsStyle="primary" block>
                <span className='glyphicon glyphicon-log-in'></span>Login
            </Button>
        </NavItem>
    </LinkContainer>

使activeClassName=""正常工作，确保没有设置活动类。

对按钮非常有帮助。我希望这能节省人们的时间。以下是比较之后的样子：