React Router tutorial in Hindi #6 Nested Routing

What is Nested Navigation

Make some pages for Nested Navigation

Make routes for Nested Navigation

Interview Question


In React JS, especially when using React Router, Nested Navigation (or Nested Routes) means placing routes inside other routes, so that a parent component controls the layout and child components render inside it.


import { Link, NavLink, Outlet } from "react-router";

export default function College(){
return<div className="college" style={{textAlign:'center'}}>
<h1>College Page</h1>
<NavLink className="link" to="student">Student</NavLink>
<NavLink className="link" to="department">Departments</NavLink>
<NavLink className="link" to="detail">College Details</NavLink>
<Outlet />

</div>
}



export default function Department(){
return<div >
<h1>Department Page</h1>
</div>
}



export default function Details(){
return<div >
<h1>Detail Page</h1>
</div>
}

export default function Student(){
return<div >
<h1>Student Page</h1>
</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: 300px;
}
.header ul li{
padding: 10px;
}
.header .link h2{
margin: 0;
}
.header .link{
text-decoration: none;
font-size: 20px;
}

.college .link{
text-decoration: none;
font-size: 20px;
margin: 10px;
}