React Router Tutorial in Hindi #7 Layout and Index Routes

What is Layout Routes

Example of Layout Routes

Index Routes

Example of Index Routes

Interview Question

In React JS, especially when using React Router (v6 and above), Layout Routes are routes that share a common UI layout across multiple child routes.


import { Navigate, Route, Routes } from 'react-router'
import Home from './Home'
import About from './About'
import Login from './Login'
import NavBar from './NavBar'
import PageNotFound from './PageNotFound'
import College from './College'
import Student from './Student'
import Department from './Department'
import Details from './Details'

function App() {

return (
<>
{/* <NavBar /> */}
<Routes>

<Route element={<NavBar />}>
<Route path="/" element={<Home />} />
<Route path="about" element={<About />} />
<Route path="/login" element={<Login />} />
</Route>

<Route path="/college" element={<College />}>
<Route index element={<Student />} />
<Route path='department' element={<Department />} />
<Route path='detail' element={<Details />} />

</Route>

{/* <Route path='/*' element={<PageNotFound />} /> */}
<Route path='/*' element={<Navigate to="/" />} />




</Routes>
</>
)
}

export default App


import { Link, Outlet } from "react-router";
import './header.css'
export default function NavBar() {
return<div>
<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>
<li>
<Link className="link" to="/college">College</Link>
</li>
</ul>
</div>
</div>
<Outlet />
</div>
}


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

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

</div>
}