Next.js App目录嵌套路由刷新后下拉菜单失效求助

问题根源 #

1. 组件未标记为客户端组件：Next.js App Router默认组件为服务器组件，而Bootstrap下拉菜单依赖客户端JavaScript交互，必须明确标记为客户端组件才能正常运行。
2. HTML结构错误：你的代码中Navbar.Toggle标签闭合顺序颠倒，导致DOM结构异常，直接影响下拉菜单的触发逻辑。
3. 客户端交互逻辑未初始化：Bootstrap的下拉交互需要在客户端完成初始化，服务器组件无法执行这部分逻辑。

具体修复步骤 #

1. 标记组件为客户端组件

在包含Navbar的组件文件顶部添加'use client'指令，强制组件在客户端渲染并运行交互逻辑：

'use client';

import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import NavDropdown from 'react-bootstrap/NavDropdown';
import Link from 'next/link';

2. 修正Navbar的DOM结构

确保Navbar.Toggle和Navbar.Collapse被正确包裹在Navbar组件内，标签闭合顺序正确：

<Navbar expand="lg" className="bg-body-tertiary">
  <Navbar.Toggle aria-controls="responsive-navbar-nav" />
  <Navbar.Collapse id="responsive-navbar-nav">
    <Nav className="me-auto navbar_show">
      {/* About下拉菜单 */}
      <NavDropdown title="About" id="collapsible-nav-dropdown">
        <NavDropdown.Item as={Link} href="/about">About Us</NavDropdown.Item>
        <NavDropdown.Item as={Link} href="/about/news">News Letter</NavDropdown.Item>
        <NavDropdown.Item as={Link} href="/about/vision">Vision</NavDropdown.Item>
        <NavDropdown.Item as={Link} href="/about/mission">mission</NavDropdown.Item>
      </NavDropdown>
    </Nav>
  </Navbar.Collapse>
</Navbar>

3. 确保依赖版本兼容

如果使用react-bootstrap，建议升级到^2.9.0及以上版本，该版本对Next.js App Router的兼容性更好，能避免 hydration 不匹配的问题。

4. 手动初始化下拉菜单（原生Bootstrap场景可选）

若直接使用原生Bootstrap而非react-bootstrap，需通过useEffect在客户端手动初始化下拉组件：

'use client';

import { useEffect } from 'react';

export default function CustomNavbar() {
  useEffect(() => {
    import('bootstrap/dist/js/bootstrap.bundle.min.js').then((bootstrap) => {
      const dropdowns = document.querySelectorAll('.dropdown-toggle');
      dropdowns.forEach(el => new bootstrap.Dropdown(el));
    });
  }, []);

  // 此处放置修正后的Navbar结构代码
}

验证方式 #

修改完成后，进入嵌套路由页面（如/about/news）并刷新，点击"About"下拉菜单，确认菜单能正常展开和收起。

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