标签: react-router-bootstrap

从 LinkContainer 中删除活动类

在我的反应应用程序中,我有用于登录和退出的按钮。注销没什么大不了的,因为它从来没有被激活过。当使用 LinkContainer(这很棒)时,它会添加一个活动类,active指示何时选择该路由。这对除buttons. 当它将`active 类添加到我的按钮时,它会在按钮后面添加一个填充的背景颜色。我不想要那个。现在是代码和图片:

按钮上的活动类

这是代码:

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>
Run Code Online (Sandbox Code Playgroud)

我希望它在我的按钮以外的所有东西上设置那个活动类。

使用react-bootstrapreact-router-bootstrap

reactjs react-bootstrap react-router-bootstrap

0
推荐指数
1
解决办法
1053
查看次数

是否有针对 React-router-bootstrap 错误的 LinkContainer 组件的解决方案?

因此,我使用react-router-bootstrap 中的LinkContainer 组件来包装bootstrap 中的Nav.Link 组件。请参考下图以供参考。

// Snippet
import {LinkContainer} from "react-router-bootstrap";

// Snippet

              <LinkContainer to="/cart">
                <Nav.Link class="navlink">
                  <FaShoppingCart /> Cart
                </Nav.Link>
              </LinkContainer>

// Snippet

Run Code Online (Sandbox Code Playgroud)

但我的代码出现此错误:[错误照片][1] [1]:https://i.stack.imgur.com/AF41y.png

顺便说一句,我正在使用 React v.17.0.2 和 React-Router-Bootstrap v.0.25.0

我想问是否有人可以提供帮助,或者我应该更改我的react-router-bootstrap 版本,甚至使用react-router-component 来代替。

先感谢您。

javascript reactjs react-bootstrap react-router-dom react-router-bootstrap

0
推荐指数
1
解决办法
2661
查看次数