React Router tutorial in Hindi #4 Make Navbar and Header with React router 7

Write HTML for header

Add Links in header

Write CSS for header

Interview Questions


import { Link } from "react-router";
import './header.css'
export default function NavBar() {
return <div className="header">
<div>
<Link className="link" to={"/"}><h2>Logo</h2></Link>
</div>
<div>
<ul>
<li>
<Link className="link" to="/">Home</Link>
</li>
<li>
<Link className="link" to="/login">Login</Link>
</li>
<li>
<Link className="link" to="/about">About</Link>
</li>
</ul>
</div>
</div>
}


.header {
display: flex;
justify-content: space-between;
background-color: #e1caca;
padding: 10px;
}
body{
margin: 0;
padding: 0;
}

.header ul {
display: flex;
list-style-type: none;
margin: auto;
justify-content: space-around;
width: 200px;
}
.header ul li{
padding: 10px;
}
.header .link h2{
margin: 0;
}
.header .link{
text-decoration: none;
font-size: 20px;
}