React Router Tutorial in Hindi #9 Dynamic Route

What is Dynamic Routes.

Make user list page

Make user detail page

Make Dynamic routing

Interview Question

Dynamic Routes are routes whose path contains a variable (parameter) instead of being fixed.

This allows you to create pages that can handle different values dynamically (like product details, user profiles, blog posts, etc.).


import { Navigate, Route, Router, 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'
import UserList from './UserList'
import UserDetail from './UserDetails'

function App() {

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

<Route element={<NavBar />}>
<Route path="/" element={<Home />} />
<Route path='/users' element={<UserList />} />
<Route path='/users/:id' element={<UserDetail />} />

<Route path='in'>
<Route path='/in/user'>
<Route path="/in/user/login" element={<Login />} />
<Route path="/in/user/about" element={<About />} />
</Route>
</Route>

</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="/in/user/login">Login</Link>
</li>
<li>
<Link className="link" to="/in/user/about">About</Link>
</li>
<li>
<Link className="link" to="/college">College</Link>
</li>
<li>
<Link className="link" to="/users">Users</Link>
</li>
</ul>
</div>
</div>
<Outlet />
</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: 350px;
}
.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;
}


import { Link } from "react-router"

export default function UserList() {
const userData = [
{ id: 1, name: 'Anil' },
{ id: 2, name: 'Sam' },
{ id: 3, name: 'Sidhu' },
{ id: 4, name: 'Peter' },
{ id: 5, name: 'Bruce' },
{ id: 6, name: 'Tony' },

]
return <div style={{ marginLeft: 20 }} >
<h1>User List Page</h1>
{
userData.map((item) => (
<div>
<h4><Link to={"/users/"+item.id} >{item.name}</Link></h4>
</div>
))
}

</div>
}


import { Link, useParams } from "react-router"

export default function UserDetail() {

const paramsData=useParams();
console.log(paramsData.id);
return <div style={{ marginLeft: 20 }} >
<h1>User Detail Page</h1>
<h2>User id is :{paramsData.id}</h2>
<h3><Link to="/users">Back</Link></h3>
</div>
}



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