我正在将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>
一切正常,但我遇到一个奇怪的问题,当我选择一个菜单项时,它就被选中了,但是当我单击品牌链接时,它是在选择正确的主页,但未取消选择已选择的菜单。
我为此创建了代码沙箱。