我正在制作一个网站，在那里我使用React-Router-DOM的NavLink组件来防止为单页应用程序体验重发器。
当我试图使站点具有响应性时，我一直试图使react-bootstrap中具有响应性的navbar在选择一个NavLink后崩溃，但是collapseOnSelect行为似乎对react-bootstrap附带的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>
如有任何帮助，我们将不胜感激！
我也有同样的问题，我使用'react-bootstrap'中的nav.Link作为'react-router-dom'中的链接，不要忘记添加href attribut。在本例中，除pizzas链接外的所有链接都折叠导航栏。希望对你有帮助。
import React from 'react';
import { Navbar, Nav } from 'react-bootstrap';
import NavBrand from './NavBrand/NavBrand';
import { Link } from 'react-router-dom';
const Navigation = ({ brand }) => {
return (
<Navbar collapseOnSelect expand='sm' bg='dark' variant='dark' fixed='top'>
<NavBrand text={brand.text} />
<Navbar.Toggle aria-controls='responsive-navbar-nav' />
<Navbar.Collapse id='responsive-navbar-nav'>
<Nav className='mr-auto'>
<Nav.Link as={Link} to='/assiettes' href='/assiettes'>
ASSIETTES
</Nav.Link>
<Nav.Link as={Link} to='/pizzas'>
PIZZAS
</Nav.Link>
<Nav.Link as={Link} to='/sandwichs' href='/sandwichs'>
SANDWICHS
</Nav.Link>
<Nav.Link as={Link} to='/tacos' href='/tacos'>
TACOS
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
};
export default Navigation;
