从 LinkContainer 中移除 Active Class

Question

在我的 React 应用程序中，我有用于登录和注销的按钮。注销没什么大不了的，因为它从未激活过。当使用 LinkContainer（很棒）时，它会在选择该路由时添加 active 的活动 class。这对除 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>

我希望它在除我的按钮以外的所有内容上设置活动 class。

使用 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="" 正常工作，因为它会确保没有活动的 class 被设置。

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

从 LinkContainer 中移除 Active Class

Remove Active Class from LinkContainer

reactjs

react-bootstrap

react-router-bootstrap