React Bootstrap Navbar组件无法显示问题求助

我尝试使用React Bootstrap的Navbar组件，已完成Bootstrap依赖安装，直接粘贴官方示例代码后，Navbar始终无法渲染，自己排查许久找不到原因，恳请大家帮忙定位问题。

以下是我的代码：

App.js #

import 'regenerator-runtime/runtime';
import React from 'react';
import './assets/global.css';
import { Container, Nav, Navbar, NavDropdown} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

export default function App() {
  return (
    <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
      <Container>
        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link href="#features">Features</Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
            <NavDropdown title="Dropdown" id="collasible-nav-dropdown">
              <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
              <NavDropdown.Item href="#action/3.2">
                Another action
              </NavDropdown.Item>
              <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
              <NavDropdown.Divider />
              <NavDropdown.Item href="#action/3.4">
                Separated link
              </NavDropdown.Item>
            </NavDropdown>
          </Nav>
          <Nav>
            <Nav.Link href="#deets">More deets</Nav.Link>
            <Nav.Link eventKey={2} href="#memes">
              Dank memes
            </Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>,
  );
}

global.css #

body {
  margin: 0;
}

排查建议： #

1. 修复语法错误：你的App组件return语句中，JSX末尾多了一个逗号（<Navbar>,），这会触发JavaScript语法错误，直接阻止组件渲染，删掉该逗号即可。
2. 确认依赖安装完整：确保已正确安装react-bootstrap和bootstrap两个依赖，执行命令：

   npm install react-bootstrap bootstrap
   

3. 查看控制台报错：打开浏览器开发者工具的Console面板，查看是否存在版本不兼容、路径错误等其他报错信息，这是定位问题最直接的方式。
4. 排除样式干扰：暂时注释掉自定义的global.css导入，验证Navbar是否能正常渲染，排除自定义样式的影响。

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