reactjs - React Bootstrap - 在路线更改时关闭 NavDropdown

Question

我正在使用 <NavDropdown> ( link to docs ) 在 <Nav> 中组件，效果很好。我遇到的问题是我无法关闭路线更改的打开下拉列表。下面是代码示例:

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>

我希望能够添加 onClick关闭任何打开的下拉菜单的链接的处理程序，但我看不到执行此操作的有效方法。

如果有任何帮助，我将不胜感激。

Answer 1

我已经让它按如下方式工作:

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>

选择项目并关闭菜单时，它不会重新启动应用程序。您可以以编程方式填充项目。