React-Bootstrap导航栏链接在浏览器不显示的求助

我使用React搭配React-Bootstrap编写了导航栏组件，代码如下：

import React from "react";
import { Navbar, Nav, Container } from "react-bootstrap";
import { NavLink } from "react-router-dom";

const MyNavBar = () => {
  return (
    <Navbar bg="dark" variant="dark" expand="lg">
      <Container>
        <Navbar.Brand href="/">
          <img
            src="https://static.vecteezy.com/system/resources/previews/000/606/489/original/vector-letter-a-logo-slice-logo-design-concept-template.jpg"
            width="30"
            height="30"
            className="d-inline-block align-top"
            alt="logo"
          />
          Aritra Debnath
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav">
          <Nav className="me-auto">
            <NavLink exact to="/" className="nav-link" activeClassName="active">Home</NavLink>
            <NavLink exact to="/projects" className="nav-link" activeClassName="active">Projects</NavLink>
            <NavLink exact to="/contact" className="nav-link" activeClassName="active">Contact</NavLink>
          </Nav>
        </Navbar.Toggle>
      </Container>
    </Navbar>
  );
};

export default MyNavBar;

组件代码看似无误，但导航栏中的NavLink链接在浏览器中无法显示（仅能看到导航栏品牌区域，导航链接完全不显示）。

问题原因 #

核心错误是将Nav组件嵌套在了Navbar.Toggle内部。Navbar.Toggle仅作为响应式导航的触发按钮，不能承载导航链接内容，这直接导致链接无法被渲染显示。

修复方案 #

调整React-Bootstrap导航栏的结构，使用Navbar.Collapse组件包裹Nav，并通过aria-controls属性与Navbar.Toggle关联，实现正确的响应式逻辑：

import React from "react";
import { Navbar, Nav, Container, NavbarCollapse } from "react-bootstrap";
import { NavLink } from "react-router-dom";

const MyNavBar = () => {
  return (
    <Navbar bg="dark" variant="dark" expand="lg">
      <Container>
        <Navbar.Brand href="/">
          <img
            src="https://static.vecteezy.com/system/resources/previews/000/606/489/original/vector-letter-a-logo-slice-logo-design-concept-template.jpg"
            width="30"
            height="30"
            className="d-inline-block align-top"
            alt="logo"
          />
          Aritra Debnath
        </Navbar.Brand>
        {/* 触发按钮 */}
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        {/* 折叠容器，包裹导航链接 */}
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="me-auto">
            <NavLink exact to="/" className="nav-link" activeClassName="active">Home</NavLink>
            <NavLink exact to="/projects" className="nav-link" activeClassName="active">Projects</NavLink>
            <NavLink exact to="/contact" className="nav-link" activeClassName="active">Contact</NavLink>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
};

export default MyNavBar;

关键说明 #

1. 结构规范：React-Bootstrap的导航栏需要遵循Navbar -> Container -> Navbar.Brand + Navbar.Toggle + Navbar.Collapse(包含Nav)的层级结构
2. 响应式关联：Navbar.Toggle的aria-controls属性值必须与Navbar.Collapse的id一致，确保点击按钮能正确展开/收起菜单
3. 版本兼容：如果使用react-router-dom v6，activeClassName已被废弃，需要改用className的函数形式来设置激活状态样式：

   <NavLink 
     exact to="/" 
     className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
   >Home</NavLink>
   

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