如何实现点击内部链接时折叠React-Bootstrap汉堡样式菜单？

要实现点击自定义导航链接时自动折叠导航栏，你可以通过控制Navbar.Collapse的展开状态来实现，具体步骤如下：

1. 添加状态管理 #

在你的导航组件中引入useState钩子，用来跟踪导航栏的折叠状态：

import { useState } from 'react';
import { Navbar, Nav } from 'react-bootstrap';
// 导入你的BlinkingNavLink组件

在组件内部定义状态：

const [isNavCollapsed, setIsNavCollapsed] = useState(true);

2. 绑定状态到导航栏组件 #

• 给Navbar.Toggle添加点击事件，切换折叠状态
• 给Navbar.Collapse设置isOpen属性，关联状态值

修改后的Navbar代码：

<Navbar
  bg="dark"
  expand="lg"
  className={`row z-2 ${visible ? "navbar-visible" : "navbar-hidden"}`}
  sticky="top"
>
  <Navbar.Toggle 
    aria-controls="basic-navbar-nav" 
    onClick={() => setIsNavCollapsed(!isNavCollapsed)} 
  />
  <Navbar.Collapse 
    id="basic-navbar-nav" 
    isOpen={!isNavCollapsed}
  >
    <Nav className="mx-auto space-evenly w-100 d-flex justify-content-between align-items-center px-5">
      <BlinkingNavLink
        to="scroll-here-intro"
        onClick={() => setIsNavCollapsed(true)}
      >
        about
      </BlinkingNavLink>
      <BlinkingNavLink
        to="scroll-here-skills"
        onClick={() => setIsNavCollapsed(true)}
      >
        skills
      </BlinkingNavLink>
      <BlinkingNavLink
        to="scroll-here-education"
        onClick={() => setIsNavCollapsed(true)}
      >
        education
      </BlinkingNavLink>
      <BlinkingNavLink
        to="scroll-here-projects"
        onClick={() => setIsNavCollapsed(true)}
      >
        projects
      </BlinkingNavLink>
      {/* NavDropdown can remain as is for non-NavLink items */}
    </Nav>
  </Navbar.Collapse>
</Navbar>

3. 确保自定义BlinkingNavLink支持onClick事件 #

如果你的BlinkingNavLink是基于React Router的Link或React-Bootstrap的Nav.Link封装的，需要确保它能接收并传递onClick属性：

// 示例BlinkingNavLink的实现
import { NavLink } from 'react-router-dom';
import { Nav } from 'react-bootstrap';

const BlinkingNavLink = ({ to, children, onClick, ...props }) => {
  return (
    <Nav.Link 
      as={NavLink} 
      to={to} 
      onClick={onClick} 
      {...props}
    >
      {children}
    </Nav.Link>
  );
};

export default BlinkingNavLink;

这样，每次点击导航链接时，都会触发setIsNavCollapsed(true)，让导航栏自动折叠回收起状态。

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