搭配react-scroll的React Bootstrap导航栏响应式下点击导航项无法自动折叠求助

• 当前实现混用了原生Bootstrap类名和React自定义滚动组件的逻辑：原生Bootstrap导航栏的折叠自动收起，是依赖监听原生a标签的点击事件、配合jQuery操作DOM类名实现的；但你使用react-scroll的自定义Link组件替换了原生a标签，同时没有配套的事件触发逻辑，导致点击导航项时折叠栏的收起动作根本不会被触发。
• 额外的无效配置：你在折叠容器<div className="collapse navbar-collapse">上添加的data-toggle="collapse" data-target=".navbar-collapse.show"属于错误用法，这类触发属性仅适配原生按钮的点击逻辑，挂载在折叠容器上完全不生效，无法实现任何交互控制。

最小改动版（适配当前现有代码结构） #

• 移除折叠容器上错误挂载的data-toggle、data-target属性。
• 通过React的ref拿到折叠容器的DOM节点，给每个导航Link组件绑定点击事件，手动移除折叠展开状态对应的show类名，即可实现点击导航项后自动收起的效果。
• 核心改造代码片段：

import React, { useRef } from 'react'
// 其余原有导入保持不变

const Navbar = () => {
  // 绑定折叠容器的DOM引用
  const collapseContainerRef = useRef(null)

  // 点击导航项时的收起逻辑
  const closeCollapseOnNavClick = () => {
    // 检测当前容器是否处于展开状态，匹配时移除show类名
    collapseContainerRef.current?.classList.remove('show')
  }

  return (
    <nav className="navbar navbar-expand-lg navbar-light bg-dark fixed-top">
      <div className="container">
        <Link smooth={true} to="home" className="navbar-brand" >
          <img className="Logo" src={Logo} />
        </Link>
        <button 
          className="navbar-toggler" 
          type="button" 
          data-toggle="collapse" 
          data-target="#navbarSupportedContent" 
          aria-controls="navbarSupportedContent" 
          aria-expanded="false" 
          aria-label="Toggle navigation"
        >
          <FontAwesomeIcon icon={faBars} style={{ color: "#fff" }} />
        </button>

        {/* 替换原来带错误属性的折叠容器，绑定ref */}
        <div 
          className="collapse navbar-collapse" 
          id="navbarSupportedContent"
          ref={collapseContainerRef}
        >
          <ul className="navbar-nav ml-auto">
            <li className="nav-item active">
              <Link 
                smooth={true} 
                to="about" 
                offset={-70} 
                className="nav-link"
                onClick={closeCollapseOnNavClick}
              >
                About Me<span className="sr-only">(current)</span>
              </Link>
            </li>
            {/* 其余导航项均按上述格式，添加onClick={closeCollapseOnNavClick}即可 */}
            <li className="nav-item">
              <Link 
                smooth={true} 
                to="services" 
                offset={-70} 
                className="nav-link"
                onClick={closeCollapseOnNavClick}
              >
                Services
              </Link>
            </li>
          </ul>
        </div>
      </div>
    </nav >
  )
}

export default Navbar

长期适配版（避免后续交互兼容问题） #

• 替换原生Bootstrap类名的混用逻辑，使用React生态的官方导航组件，通过组件自带的状态变量控制折叠的展开/收起：导航项点击时将折叠状态置为false，即可自动触发收起动作，全程不需要手动操作DOM类名，和React的渲染逻辑完全兼容。
• 注意点：使用react-scroll的Link组件时，移除所有冗余的eventKey、空href="#"属性，这类属性既不影响功能，还可能触发浏览器默认的跳转行为，抵消平滑滚动的效果。

内容的提问来源于stack exchange，提问作者Michael Nguyen