小编use*_*065的帖子

带有 react-router-dom NavLinks 的 react-bootstrap 导航栏中的 collapseOnSelect

我正在制作一个网站,我在其中使用 react-router-dom 的 NavLink 组件来防止单页应用程序体验的重新渲染。

当我试图使站点具有响应性时,我一直在尝试在选择 NavLink 后使响应式导航栏从 react-bootstrap 崩溃,但是 collapseOnSelect 行为似乎不适用于除 Nav.Link 组件以外的任何其他组件与反应引导。

其他解决方案建议使用手动切换功能等将道具传递给导航 (navExpanded:true),但这似乎仍会由于状态更改而强制重新渲染。我想避免这种情况的主要原因是我使用 react-transitions-group 在页面之间进行了转换。

<Navbar collapseOnSelect expand="md" variant="dark">
    <Container>
        <Navbar.Brand href="/"><Logo/></Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
            <Nav className="Navs ml-auto">
                <NavLink className="nav-link" to="/about">ABOUT</NavLink>
                <NavLink className="nav-link" to="/portfolio">PORTFOLIO</NavLink>
                <NavLink className="nav-link" to="/contact">CONTACT</NavLink>
            </Nav>
        </Navbar.Collapse>
    </Container>
</Navbar>
Run Code Online (Sandbox Code Playgroud)

任何帮助将不胜感激!

reactjs react-bootstrap react-router-dom

3
推荐指数
1
解决办法
2202
查看次数