LinkContainer дважды устанавливает активный класс, а активный класс не удаляется при нажатии на ссылку бренда. - PullRequest
0 голосов
/ 13 декабря 2018

Я использую React Bootstrap с реакции-маршрутизатором для реализации функциональности навигационной панели.Ниже я предоставляю код для того же.

Маршруты

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

Nav Links

<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

...