React.js中如何实现点击链接后隐藏Bootstrap可折叠导航栏？

实现原理 #

Bootstrap 5 原生提供折叠组件的JS调用API，不需要手动操作DOM类名、手动同步aria属性，直接调用实例的hide()方法就能在路由跳转时自动收起展开的移动端导航，同时保留原有折叠按钮的切换逻辑、图标切换样式，不会和React的渲染逻辑冲突。

具体实现步骤 #

• 按需引入Bootstrap的Collapse模块，不用全量引入Bootstrap JS
• 为折叠导航容器绑定ref，用于初始化Collapse实例
• 编写导航链接点击事件：仅在屏幕宽度小于lg断点（992px，即折叠菜单生效的视口范围）时，调用Collapse实例的hide()方法收起导航
• 给所有路由导航项绑定点击事件即可

完整修改后代码 #

import { useRef } from 'react';
import { Link, NavLink } from 'react-router-dom';
// 按需引入Bootstrap折叠组件
import Collapse from 'bootstrap/js/dist/collapse';

const Navbar = () => {
  // 绑定折叠导航容器的ref
  const navCollapseRef = useRef(null);
  // 存储折叠实例，避免重复初始化
  let bsCollapseInstance = null;

  // 导航链接点击收起逻辑
  const handleNavClick = () => {
    // 仅移动端折叠状态下执行收起
    if (window.innerWidth < 992) {
      if (!bsCollapseInstance) {
        bsCollapseInstance = new Collapse(navCollapseRef.current, {
          toggle: false // 初始化时不自动触发切换
        });
      }
      bsCollapseInstance.hide();
    }
  };

  return (
    <nav className="navbar navbar-expand-lg navbar-light bg-light mb-4">
      <div className="container">
        <Link className='rubik navbar-brand fs-3' to='/'>Rick & Morty <span className='text-primary'>Wiki</span></Link>

        <button 
          className="navbar-toggler" 
          type="button" 
          data-bs-toggle="collapse" 
          data-bs-target="#navbarNavAltMarkup" 
          aria-controls="navbarNavAltMarkup" 
          aria-expanded="false" 
          aria-label="Toggle navigation"
        >
          <style jsx="true">
            {`
              button[aria-expanded="false"] > .close{
                display: none;
              }
              button[aria-expanded="true"] > .open{
                display: none;
              }
              .navbar-toggler{
                border: none;
                font-size: 30px
              }
              .navbar-toggler:focus {
                text-decoration: none;
                outline: 0;
                box-shadow: none;
              }
            `}
          </style>
          <i className="fas fa-bars open fw-bold text-dark"></i>
          <i className="fas fa-times close fw-bold text-dark"></i>
        </button>

        {/* 给折叠容器绑定ref */}
        <div 
          ref={navCollapseRef}
          className="collapse navbar-collapse justify-content-end" 
          id="navbarNavAltMarkup"
        >
          <div className="navbar-nav text-center fs-5">
            {/* 所有NavLink绑定点击事件 */}
            <NavLink 
              activeclassname="active" 
              className="nav-link" 
              to="/"
              onClick={handleNavClick}
            >
              Characters
            </NavLink>
            <NavLink 
              className="nav-link" 
              to="/episodes"
              onClick={handleNavClick}
            >
              Episodes
            </NavLink>
            <NavLink 
              className="nav-link" 
              to="/location"
              onClick={handleNavClick}
            >
              Location
            </NavLink>
          </div>
        </div>
      </div>
    </nav>
  )
}

export default Navbar;

补充说明 #

• 该方案完全保留原有样式、折叠按钮切换逻辑，不需要修改原有CSS
• 桌面端（视口宽度≥992px）点击导航不会触发多余的收起逻辑，不影响桌面端交互
• 不需要手动增删show类、手动修改aria-expanded属性，Bootstrap实例方法会自动处理动画和状态同步，已写的汉堡/关闭图标切换样式会正常生效

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