react bootstrap dropdown doesn't close when react router link gets called

Question

<NavDropdown
  className="userDropdownButton"
  title="dropdown"
  id="user-nav-dropdown"
  alignRight
>
  <div className="userDropDown">
    <Link to="/user" className="userDropDownheader">
      user
    </Link>
  </div>
</NavDropdown>

And both - the dropdown and the <Link> work just fine, but the dropdown doesn't close when I click on the link. I tried using https://github.com/react-bootstrap/react-router-bootstrap but it didn't fix my issue. Are there some other things I could try?

Answer 1

npm install react-router-bootstrap

then in your nav page :

import { LinkContainer } from "react-router-bootstrap";


<NavDropdown title='Dropdown' id='responsive-navbar-nav'>
     <LinkContainer to='/views/Page4' >
         <NavDropdown.Item>Counter</NavDropdown.Item>             
     </LinkContainer>
</NavDropdown>

Im using https://react-bootstrap.github.io/components/navbar/

Hope you can use LinkContainer to solve your problem.