LinkContainer设置了两次活动课程,并且在点击品牌链接时未移除活动课程

时间:2018-12-13 13:27:30

标签: bootstrap-4 react-router react-bootstrap react-router-bootstrap

我正在将React Bootstrap与react-router结合使用以实现导航栏功能。下面,我提供相同的代码。

路线

<Switch>
          <Route exact path="/" component={Home}/>
          <Route exact path="/categoryType" component={CategoryType}/>
          <Route exact path="/category" component={Category}/>
          <Redirect from='*' to='/' />
        </Switch>

导航链接

<Navbar bg="dark" expand="lg" variant="dark">
        <Navbar.Brand><Link className="navbar-brand" to="/">Project Blog</Link></Navbar.Brand>
        <Navbar.Toggle aria-controls="navbarCollapse" />
        <Navbar.Collapse id="navbarCollapse">
          <Nav className="mr-auto">
            <Nav.Item><IndexLinkContainer to={"/"}><Nav.Link>Home</Nav.Link></IndexLinkContainer></Nav.Item>
            <Nav.Item><LinkContainer to={"/categoryType"}><Nav.Link>Category Type</Nav.Link></LinkContainer></Nav.Item>
            <Nav.Item><LinkContainer to={"/category"}><Nav.Link>Category</Nav.Link></LinkContainer></Nav.Item>
          </Nav>
        </Navbar.Collapse>
      </Navbar>

一切正常,但我遇到一个奇怪的问题,当我选择一个菜单项时,它就被选中了,但是当我单击品牌链接时,它是在选择正确的主页,但未取消选择已选择的菜单。

我为此创建了代码沙箱。

https://codesandbox.io/s/l4978989m9

0 个答案:

没有答案