我在使用Reactstrap 9.0.0-2（基于Bootstrap 5.1.0 css库）时遇到了这个问题。我不确定这是否是早期（更稳定的）版本的问题。我已经有了一个想法，如何在NavLink select上关闭菜单，但想看看其他人是如何解决这个问题的，以获得一些新的想法和经验。
我尝试了第一个被接受的答案，在NavLinks上添加data-attributes和data-target，并指向NavbarToggler上的css #id属性。
相反，我通过为<NavLink />标记设置一个click处理程序来解决这个问题，该处理程序独立于切换菜单的处理程序。与其他打开和关闭菜单的处理程序不同，NavLink处理程序只通过直接将菜单的状态对象设置为false来关闭菜单。
其逻辑是：要点击<NavLink />，必须打开菜单，所以NavLink处理程序不需要打开菜单。一旦你选择了要去的地方，并点击了Navlink标记，你可能希望菜单关闭，而不是自己手动关闭它。

• 简化示例：

import React, { useState } from 'react';
import { Collapse, Nav, NavBar, NarbarBrand, NavbarToggler, NavItem } from 'reactstrap';
import { NavLink } from 'react-router-dom';

const Header = (props) => {
    const [menuOpen, setMenuOpen] = useState(false);  // initially closed

    const toggleMenu = () => {     // this handler is "regular"
        setMenuOpen(!menuOpen);    // open and close...
    };

    const closeMenu = () => {      // ... and this one only
        setMenuOpen(false);    // closes it ...
    };

return (
  <NavBar expand="md">
    <Collapse isOpen={menuOpen} navbar>
      <Nav navbar>
        <NavLink
          to="/blog/:article"
          className="navlink text-light shadow-lg"
          onClick={closeMenu}
         >
          {blogArticle.title}
          </NavLink>
                     // . . . and so on . . .

有时候最简单的解决方案也是最好的...

将data-toggle="collapse"和data-target="#navbarCollapse"添加到每个NavLink，也可切换关闭菜单。

<ul className="navbar-nav ml-auto">
  <li className="nav-item">
    <NavLink
      data-toggle="collapse"
      data-target="#navbarCollapse"
      className="nav-link"
      activeClassName="active"
      to="/"
      exact
    >
      Home
    </NavLink>
  </li>
  <li className="nav-item">
    <NavLink
      data-toggle="collapse"
      data-target="#navbarCollapse"
      className="nav-link"
      activeClassName="active"
      to="/about"
    >
      About
    </NavLink>
  </li>

可以使用状态管理菜单可见性：

import { useState } from "react";
import { NavLink } from "react-router-dom";

const Navbar = () => {
  const [show, setShow] = useState(false);
  const handleNavClick = () => {
    setShow(false);
  };
  return (
    <nav className="navbar navbar-expand-md navbar-dark bg-dark">
      <a className="navbar-brand" href="/">
        Fixed navbar
      </a>
      <button
        className="navbar-toggler"
        type="button"
        onClick={() => setShow(!show)}
      >
        <span className="navbar-toggler-icon" />
      </button>
      <div
        className={`collapse navbar-collapse  ${show ? "show" : ""}`}
        id="navbarCollapse"
      >
        <ul className="navbar-nav ml-auto">
          <li className="nav-item">
            <NavLink
              onClick={handleNavClick}
              className="nav-link"
              activeClassName="active"
              to="/"
              exact
            >
              Home
            </NavLink>
          </li>
          <li className="nav-item">
            <NavLink
              onClick={handleNavClick}
              className="nav-link"
              activeClassName="active"
              to="/about"
            >
              About
            </NavLink>
          </li>
        </ul>
      </div>
    </nav>
  );
};

export default Navbar;

您可以使用useRef钩子来实现此目的，并处理div的class属性。

const collapseRef = useRef(null);

  const hideBars = () => {
    collapseRef.current.setAttribute("class", "navbar-collapse collapse");
  };

  <div
    className="collapse navbar-collapse"
    id="navbarCollapse"
    ref={collapseRef}
  >

然后在导航链接中

<NavLink
          className="nav-link"
          activeClassName="active"
          to="/about"
          onClick={hideBars}
        >
          About
        </NavLink>

检查this沙盒

如果在bootsrap 5中仍然存在这个问题，只需将这些属性添加到li标记中，如下所示：

<li className="nav-item" data-bs-toggle='collapse' data-bs-target='.navbar-collapse.show'>
      <Link className="nav-link" to="/">
        <img src={homepage_icon} className='nav-item-icon' />
        <h6>Page d'accueil</h6>
      </Link>

最后会折叠导航栏