Я использую 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