React引入react-bootstrap Navbar组件无报错但页面渲染白屏

React项目接入react-bootstrap的NavBar导航栏组件时，控制台无报错但本地访问页面空白；移除Menu导航组件后其余页面内容可正常渲染。
相关代码如下：

Menu.js #

import React from 'react';
import { Container, Navbar, Nav } from 'react-bootstrap';
import { Component } from 'react';

class Menu extends Component{
    render(){
        return (
        <>
            <Navbar bg="dark" variant="dark">
               <Container>
                   <Nav className="me-auto">
                       <Nav.Link href="#home">Home</Nav.Link>
                       <Nav.Link href="#features">Features</Nav.Link>
                       <Nav.Link href="#pricing">Pricing</Nav.Link>
                   </Nav>
               </Container>
            </Navbar>
        </>
       );
    } 
}

export default Menu;

App.js #

import logo from './logo.svg';
import './App.css';
import {BrowserRouter as Router, Link, Route, Routes} from 'react-router-dom';
import { Component } from 'react';
import ReactDOM from 'react-dom/client';

import Header from './components/layout/header';
import Menu from './components/layout/Menu';
import Footer from './components/layout/footer';

class App extends Component{
  render(){
  return (
        <div className="App">
        <Header/>
        <Menu/>
        <Footer/>
        </div>
  );
  }
}

export default App;

• 安装Bootstrap核心依赖
  react-bootstrap只封装组件交互逻辑，不自带Bootstrap的CSS样式文件，首先在项目根目录执行命令安装依赖：

  npm install bootstrap
  

• 全局引入Bootstrap样式
  在项目入口文件（通常是src/index.js，也可以直接写在App.js顶部）添加样式导入语句：

  import 'bootstrap/dist/css/bootstrap.min.css';
  

  缺失这行导入是这类无报错白屏的最常见原因，没有样式文件支撑时，react-bootstrap部分组件会出现渲染阻塞，直接导致整页空白。
• 校验依赖版本兼容性
  确认本地安装的版本匹配：react-bootstrap@2.x 系列适配 bootstrap@5.x 版本；如果项目使用Bootstrap 4.x，需要对应安装react-bootstrap@1.x版本，版本不兼容也会触发组件渲染失败。
• 清理冗余导入
  当前App.js中导入的ReactDOM、react-router-dom相关模块都没有实际使用，虽然不会直接引发本次白屏，但冗余导入容易在后续开发中引发不必要的依赖冲突，建议直接删除。

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