stuck in loading page when using react-bootstrap

[mohqaz]

I created a new react project and i've install react-bootstrap bootstrap and created the first component which is the NavBar component and when I did npm start, , it got stuck loading the page and the download did not finish

this is my App.js
`

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

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

 export default App;

`

this is my 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

[mohqaz]

the name of my component was Navbar.js when this issue happened i changed the name and it's not solved

[robert-s-wright]

You didn't import Navbar from react-bootstrap, and you're recursively calling your NavBar component.

Try this in your NavBar component:

import React from 'react'
 import { Container, Nav, NavDropdown, NavLink, Navbar } 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