React JS结合Bootstrap开发navbar导航栏输出不显示问题求助

错误原因 #

• 导航栏放置位置错误：你将导航栏代码写在了Contact组件中，而Contact组件仅在访问/Contact路由时才会渲染，如果你当前访问的是根路径或其他路由，自然看不到导航栏内容。
• Bootstrap属性拼写错误：导航栏折叠按钮的属性写成了data-toggler，多了末尾的r，正确的属性名对应Bootstrap版本有差异，拼写错误会导致折叠功能失效，小屏状态下导航内容默认折叠隐藏，仅显示深色容器。
• 缺少Bootstrap JS依赖：你仅引入了Bootstrap的CSS文件，没有引入对应的JS和Popper依赖，Bootstrap的交互功能（比如导航栏折叠展开）无法正常运行，折叠状态的内容无法显示。
• 版本适配问题：如果你使用的是Bootstrap 5，原有Bootstrap 4的ml-auto、data-toggle等属性已经废弃，会导致样式和功能失效。

解决方案 #

1. 调整导航栏放置位置 #

如果需要全站显示导航栏，将导航栏代码从Contact组件中抽离，放到App.js中Switch标签的外部，示例如下：

// App.js调整后代码
import React, { useState, useEffect } from "react";
import { Route, Switch } from "react-router-dom";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
// 引入Bootstrap JS（Bootstrap5的bundle版本已内置Popper，无需单独引入）
import "../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js";
import Home from "./Home";
import Contact from "./Contact";
import Services from "./Services";
import About from "./About";

// 导航栏组件可单独抽离也可直接写在App内
const Navbar = () => {
  return (
    <nav className="navbar navbar-expand navbar-dark bg-dark">
      <div className="container">
        <a href="" className="navbar-brand">
          Maryam Inc.
        </a>
        <button
          className="navbar-toggler"
          data-bs-toggle="collapse"
          data-bs-target="#navbaraid"
        >
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbaraid">
          <ul className="navbar-nav text-center ms-auto">
            <li className="nav-item">
              <a href="#" className="nav-link">
                Home
              </a>
            </li>
            <li className="nav-item">
              <a href="#" className="nav-link">
                Contact
              </a>
            </li>
            <li className="nav-item">
              <a href="#" className="nav-link">
                About
              </a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  )
}

const App = (props) => {
  return (
    <div>
      <Navbar />
      <About />
      <h1 id="name" style={{ color: "blue" }}>
        Maryam
      </h1>
      <Switch>
        <Route exact path="/Home" component={Home} />
        <Route exact path="/Contact" component={Contact} />
        <Route exact path="/Services" component={Services} />
      </Switch>
    </div>
  );
};
export default App;

2. 修正属性与依赖 #

• 如果你使用Bootstrap 4：将折叠按钮的data-toggler改为data-toggle，同时引入jQuery、Popper和Bootstrap4的JS文件。
• 如果你使用Bootstrap 5：将折叠按钮的属性改为data-bs-toggle="collapse"和data-bs-target="#navbaraid"，菜单对齐类从ml-auto改为ms-auto，引入bootstrap.bundle.min.js即可。

3. 测试验证 #

如果不需要导航栏全站显示，仅需要在Contact页面显示，启动项目后访问/Contact路径即可看到导航栏内容；可以临时将navbar-expand-sm改为navbar-expand，让导航栏在所有尺寸下都展开，方便调试。

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