React Bootstrap - Close NavDropdown on route change

Question

I'm using <NavDropdown> (link to docs) in a <Nav> component and it works great. The problem I have is that I can't close an open dropdown on route change. Here's an example of the code:

const menuItems = {
  "menu item": {
    title: "Menu Title",
    links: [
      {
        text: "Link Text",
        route: "/route-to-page"
      },
      {
        text: "Link Text 2",
        route: "/route-to-page-2"
      }
    ]
  }
};

<Nav>
  {menuItems.map((item) => (
    <NavDropdown title={Menu[item].title}>
      .. Some menu items...
    </NavDropdown>
  )}
</Nav>

I would like to be able to add an onClick handler to links that closes any open dropdowns, but I can't see an effective way to do this.

I'd appreciate any help.

Answer 1

I have got this to work as follows:

import NavDropdown from 'react-bootstrap/NavDropdown';
import {Link} from 'react-router-dom';

<NavDropdown title="Maintenance" id="navigation-dropdown">
  <NavDropdown.Item to="/categories" as={Link}>Categories</NavDropdown.Item>
  <NavDropdown.Item to="/account-types" as={Link}>Account Types</NavDropdown.Item>
</NavDropdown>

It doesn't restart the app when an item is selected and the menu closes. You could populate the items programmatically.