使用react-bootstrap时卡在页面加载中

Question

我创建了一个新的 React 项目，安装了 React-bootstrap bootstrap 并创建了第一个组件，即 NavBar 组件，当我启动 NPM 时，它卡住了加载页面并且下载未完成

这是我的App.js

import './App.css';
import NavBar from './components/NavBar.js';

function App() {
return (
    <div className="App">
    <NavBar/>
    </div>
);
}

export default App;

这是我的 NavBar.js

import React from 'react'
import { Container, Nav, NavDropdown, NavLink } from 'react-bootstrap';
import NavbarBrand from 'react-bootstrap/NavbarBrand'
import NavbarCollapse from 'react-bootstrap/esm/NavbarCollapse';
import NavbarToggle from 'react-bootstrap/esm/NavbarToggle';

const NavBar = () => {
return (
    <NavBar bg="light" expand="lg">
        <Container>
            <NavbarBrand href="#home">React-Bootstrap</NavbarBrand>
            <NavbarToggle aria-controls="basic-navbar-nav" />
            <NavbarCollapse id="basic-navbar-nav">
                <Nav className='me-auto'>
                    <NavLink href="#home">Home</NavLink>
                    <NavLink href="#Link">Link</NavLink>
                    <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                        <NavDropdown.Item href="#action/3.2">Anoter Action</NavDropdown.Item>
                        <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                        <NavDropdown.Divider />
                        <NavDropdown.Item href="#action/3.4">Separted link</NavDropdown.Item>
                    </NavDropdown>
                </Nav>
            </NavbarCollapse>
        </Container>
    </NavBar>
)
}

export default NavBar

Answer 1

发生此问题时，我的组件名称是 Navbar.js，我更改了名称，但问题没有解决