Next.js中React Bootstrap Navbar选中折叠功能失效问题

collapseOnSelect属性的触发逻辑是仅监听react-bootstrap体系内Nav.Link组件的选中事件。你直接把Next.js的Link组件裸放在Nav容器内，甚至把eventKey绑定在Link组件上，Navbar完全捕获不到导航项的选中事件，自然不会触发折叠。之前尝试的Nav.Link as={Link}写法没生效，基本是因为手动嵌套了多余的<a>标签打乱事件冒泡、或者eventKey重复导致状态识别异常。

所有导航项不要裸写next/link，统一用Nav.Link作为渲染载体，通过as属性注入Next.js的Link组件，让点击事件、选中状态全程由react-bootstrap组件体系接管，collapseOnSelect就会正常触发。

注意：你原有代码里Events和Startup-Weekend两个导航项都用了eventKey="3"，重复的eventKey会导致选中状态识别异常，修复时需要给每个导航项分配唯一eventKey。

修复后完整代码（兼容Next.js 12/13+，Pages Router/App Router通用） #

import React from "react";
import { Nav, Navbar, Container } from "react-bootstrap";
import Link from "next/link";
import stylesNav from "./Navbar.module.css";

export default function Navigation() {
  return (
   <div>
      <Navbar
        collapseOnSelect
        fixed="top"
        className={stylesNav.topNavbar}
        expand="md"
        bg="dark"
        variant="dark"
      >
        <Container className={stylesNav.Cont}>
          <div className={stylesNav.scmpLogoNavbar}>
            {/* Logo区域也用Navbar.Brand绑定路由，点击Logo同样会触发折叠 */}
            <Navbar.Brand 
              eventKey="0" 
              as={Link} 
              href="/" 
              className={`${stylesNav.SCMP1} ${stylesNav.Links}`}
            >
              SCMP
            </Navbar.Brand>
          </div>

          <Navbar.Toggle aria-controls="responsive-navbar-nav" />
          <Navbar.Collapse id="responsive-navbar-nav">
            <Nav className="me-auto"></Nav>
            <Nav>
              <Nav.Link 
                eventKey="1" 
                as={Link} 
                href="/" 
                className={stylesNav.navlink}
              >
                Home
              </Nav.Link>

              <Nav.Link
                eventKey="2"
                as={Link}
                href="/Departments"
                className={stylesNav.navlink}
              >
                Departments
              </Nav.Link>

              <Nav.Link
                eventKey="3"
                as={Link}
                href="/Events"
                className={stylesNav.navlink}
              >
                Events
              </Nav.Link>

              <Nav.Link
                eventKey="4"
                as={Link}
                href="/SWS"
                className={stylesNav.navlink}
              >
                Startup-Weekend
              </Nav.Link>

              <Nav.Link 
                eventKey="5" 
                as={Link} 
                href="/auth" 
                className={stylesNav.navlink}
              >
                Login
              </Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
    </div>
  );
}

注意事项 #

• 禁止在Nav.Link内手动嵌套<a>标签：Nav.Link会自动渲染合规的锚点标签、绑定所需的事件监听，手动嵌套会打断事件冒泡，直接导致折叠逻辑失效。
• 每个导航项的eventKey必须全局唯一，重复值会导致选中状态判断错误。
• 如果你使用Next.js 12及更早版本，出现href属性未正确透传的问题，给对应Nav.Link加上passHref属性即可：

  <Nav.Link passHref eventKey="1" as={Link} href="/" className={stylesNav.navlink}>
    Home
  </Nav.Link>
  

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