React项目中React Bootstrap Navbar无法渲染问题求助

核心问题：组件导入导出不匹配 #

你的Navbar.js中导出的组件名为CollapsibleExample，但App.js里却尝试导入名为Navbar的组件，导致组件未正确加载，这是页面空白的直接原因。

其他影响渲染的问题及修复方案 #

1. 组件命名不规范
   React要求组件名必须大写开头，你的learn.js组件函数名是小写的learn，需要改为大写Learn，同时文件名建议同步改为Learn.js。

2. 路由链接错误
   直接使用Nav.Link的href会触发页面刷新，不符合单页应用特性，应该使用react-router-dom的NavLink，并通过as属性绑定到React Bootstrap的Nav.Link上。

3. Navbar结构错误
   将Nav.Link嵌套在Navbar.Brand内部不符合React Bootstrap的组件结构规范，会导致布局异常，需要调整结构。

4. Bootstrap类名过时
   Bootstrap 5中已将mr-auto替换为me-auto，旧类名可能导致导航项布局错乱。

修正后的代码示例 #

1. 修正Navbar.js

import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import 'bootstrap/dist/css/bootstrap.min.css';
import Navbar from 'react-bootstrap/Navbar';
import { NavLink } from 'react-router-dom';
import "../Navbar/navbar.css";
import instalogo from "../assets/instalogo.png";
import discordlogo from "../assets/discordlogo.png";
import youtubelogo from "../assets/youtubelogo.png";
import '../fonts/ETAluminiumB.ttf';
import '../fonts/ETAluminiumA.ttf';

function NavbarComponent() {
  return (
    <Navbar bg="black" className="justify-content-center">
      <Container>
        {/* 社交媒体链接单独放置 */}
        <Nav>
          <Nav.Link as={NavLink} to="#instagram">
            <img className="instalogo" src={instalogo} alt="Instagram" />
          </Nav.Link>
          <Nav.Link as={NavLink} to="#discord">
            <img className="instalogo" src={discordlogo} alt="Discord" />
          </Nav.Link>
          <Nav.Link as={NavLink} to="#youtube">
            <img className="youtubelogo" src={youtubelogo} alt="YouTube" />
          </Nav.Link>
        </Nav>

        {/* 品牌标识单独放置 */}
        <Navbar.Brand as={NavLink} to="/">
          <h1 className='color'>WeTech</h1>
        </Navbar.Brand>

        {/* 使用me-auto替代mr-auto */}
        <Nav className="me-auto">
          <Nav.Link as={NavLink} to="/shop">
            <p className="linkText">Shop</p>
          </Nav.Link>
          <Nav.Link as={NavLink} to="/learn">
            <p className="linkText">Learn</p>
          </Nav.Link>
        </Nav>

        <Nav>
          <Nav.Link as={NavLink} to="/aboutus">
            <p className="linkText">About</p>
          </Nav.Link>
          <Nav.Link as={NavLink} to="/contactus">
            <p className="linkText">Contact us</p>
          </Nav.Link>
        </Nav>
      </Container>
    </Navbar>
  );
}

export default NavbarComponent;

2. 修正App.js的组件导入

import React from 'react';
import NavbarComponent from "../components/Navbar/navbar"
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import "./App.css";
import Shop from './shop';
import Learn from './Learn';
import Aboutus from './aboutus';
import Contactus from './contactus';

function App(){
  return (
    <>
      <Router>
        <div>
          <NavbarComponent />
          <div className='contitle'>
            <h1>hi</h1>
          </div>
          <Routes>
            <Route path="/shop" element={<Shop/>} />
            <Route path="/aboutus" element={<Aboutus/>} />
            <Route path="/contactus" element={<Contactus/>} />
            <Route path="/learn" element={<Learn/>} />
          </Routes>
        </div>
      </Router>
    </>
  );
}
export default App;

3. 修正learn.js（重命名为Learn.js）

import React from 'react'

function Learn() {
  return (
    <div>learn</div>
  )
}
export default Learn

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