I am currently working on creating a Navbar using react-bootstrap, but my app is not rendering anything at all. The Navbar is placed in a separate component and I also have some CSS styling in a separate file. However, the only thing displaying in the app is the background color. What could be causing this issue?
Below is the code for my react-bootstrap component:
import Container from 'react-bootstrap/Container'
import Nav from 'react-bootstrap/Nav'
import Navbar from 'react-bootstrap/Navbar'
import {
BrowserRouter as Router,
Routes, Route, Link
} from "react-router-dom"
import '../css/styles.css'
const Header = ({user}) => {
const padding = {
padding: 5
}
return (
<Navbar className='nav' bg="light" expand="lg">
<Container>
<Navbar.Brand href="#home">Nerdr</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#" as="span">
{user
? <em>{user} logged in</em>
: <Link to="/login">login</Link>
}
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
)
}
export default Header
Here is the snippet from my CSS file:
body {
...
...
.btn-add:hover {
background-color: #2980b9;
}
.btn-remove,
.btn-reset {
padding: 12px 18px;
margin: 12px auto 0;
font-size: 14px;
font-weight: 700;
color: #fff;
background-color: #3498db;
border-radius: 4px;
}
.btn-remove:hover,
.btn-reset:hover {
background-color: #2980b9;
}
.btn-reset {
margin: 21px auto 0;
}