Nested Routes কী?
Nested Routes হলো একটি root এর মধ্যে এক বা একাধিক root বা child root set করা। অর্থাৎ একটি page-এর একাধিক sub-page।
ব্যবহার ক্ষেত্র
১. যদি একটি page-এর মধ্যে অনেক sub-page থাকে, Nested Routes ব্যবহার করলে code এবং routing structure clean থাকে।
- Parent page-এর নির্দিষ্ট অংশে child root-এর content render হয়। যেমন: dashboard মধ্যে Settings বা Profile page দেখানো।
- Nested Routes দিয়ে আপনি সহজেই /dashboard/settings বা /dashboard/profile এর মতো dynamic path তৈরি করতে পারেন।
কীভাবে Nested Route ব্যবহার করা যায়
<Route path='' element={} /> শুধুমাত্র একটি root element এর জন্য কাজ করে। sub-page তৈরি করার জন্য আমারা self-closing tag use না করে <Route> ... </Route>use করতে পারি।
<Routes>
<Route path="/dashboard" element={<Dashboard />}>
<Route path="settings" element={<Settings />} />
<Route path="profile" element={<Profile />} />
</Route>
</Routes>
Example 02
Header.jsx এখানে আমরা Header section-এর Logo, Navigation Links ও অন্য সব style করেছি।
import { Link } from "react-router-dom";
const Header = () => {
return (
<>
<nav className="bg-gray-800 text-white py-4">
<div className="container mx-auto flex justify-between items-center">
<a href="/" className="text-2xl font-bold">React Router</a>
<div className="space-x-4">
<Link to='/'className="hover:text-gray-400">Home</Link>
<Link to="/about" className="hover:text-gray-400">About</Link>
<Link to="/contact" className="hover:text-gray-400">Contact</Link>
<Link to= "/blog" className="hover:text-gray-400">Blog</Link>
</div>
</div>
</nav>
</>
);
};
export default Header;
App.jsx এ dynamic routing add করছি
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Layout from "./components/Layout";
import Home from "./components/Home";
import About from "./components/About";
import Blog from "./components/Blog";
import Contact from "./components/Contact";
const App = () => {
return (
<>
<BrowserRouter>
<Routes>
<Route element={<Layout />}>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/blog" element={<Blog />} />
<Route path="/contact" element={<Contact />} />
</Route>
</Routes>
</BrowserRouter>
</>
);
};
export default App;
এখানে লক্ষনীয় বিষয়, <Route element={<Layout />}>...</Route> element-এর property হিসেবে component render করা হচ্ছে। যার child/nested components হিসেবে Home, About, Blog, Contact render হচ্ছে। অর্থাৎ, যেখানে Layout component থাকবে তার nested route হিসেবে অন্য component সমূহ render হবে।
Layout.jsx এ Header.jsx ও Outlate.jsx component render হচ্ছে।
import { Outlet } from "react-router-dom";
import Header from "./Header";
const Layout = () => {
return (
<>
<Header />
<Outlet />
</>
);
};
export default Layout;
মূলত, App.jsx এর মধ্যে <Route element={<Layout />}>...</Route> element={<Layout />}parent হিসেবে render হচ্ছে। React router default ভাবে key props Outlate parent component-এ send করছে। পরবর্তীতে Layout Outlate import করে use করছে। import { Outlet } from "react-router-dom"; <Outlet />
আবার আমার যদি চাই কোন component-কে একই navigation bar/ path-এ না দেখিয়ে সতন্ত্র path-এ দেখাতে তবে parent থেকে বাইরে <Route /> use করতে পারি।
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Layout from "./components/Layout";
import Home from "./components/Home";
import About from "./components/About";
import Blog from "./components/Blog";
import Contact from "./components/Contact";
const App = () => {
return (
<>
<BrowserRouter>
<Routes>
<Route element={<Layout />}>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/blog" element={<Blog />} />
<Route path="/contact" element={<Contact />} />
</Route>
</Routes>
<Route path="/faq" element={<FAQ />} />
</BrowserRouter>
</>
);
};
Creating more nested
নতুন Link Host create করে তার nested path dashboard, income এবং reviews করা হয়েছে।
App.jsx
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Layout from "./components/Layout";
import Home from "./components/Home";
import About from "./components/About";
import Blog from "./components/Blog";
import Contact from "./components/Contact";
import Daashboard from "./components/Host/Dashboard";
import Income from "./components/Host/Income";
import Reviews from "./components/Host/Reviews";
const App = () => {
return (
<>
<BrowserRouter>
<Routes>
<Route element={<Layout />}>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/blog" element={<Blog />} />
<Route path="/contact" element={<Contact />} />
<Route path="/contact" element={<Contact />} />
<!-- Creating new nested path-->
<Route path="/host" element={<Dashboard />} >
<Route path="/host/income" element={<Income />} />
<Route path="/host/reviews" element={<Reviews />} />
</Route>
</Route>
</Routes>
</BrowserRouter>
</>
);
};
export default App;
HostLayout.jsx
import {Link, Outlet} from "react-router-dom";
function HostLayout () {
return(
<>
<nav>
<Link to="/host">Dashboard</Link>
<Link to="/host/income">Income</Link>
<Link to="/host/reviews">Reviews</Link>
</nav>
<Outlet />
</>
)
}
export default HostLayout;
Dashboard.jsx
import { Outlet } from "react-router-dom";
function Dashboard () {
return(
<h1>Our Dashboard Here</h1>
<Outlate />
)
}
export default Dashboard;
Addressbar-এ path-টি দেখেবেঃ-
Host link-এ click করলে
Host link থেকে dashboard-এ
এখানে লক্ষণীয় বিষয় হলো Dashboard নতুন আর একটি Outlate তৈরি করছে। সুতরাং, আমারা একটি web-page এ একাধিক Outlate-এর মাধ্যমে একাধিক Nested Route তৈরি করতে পারি। Layout এবং Dashboard ঠিক একইভাবে কাজ করছে।
Output
Host এ click করলে Dashboard দেখাবে। এর পর income/reviews
SOCIAL SHARE CARD GENERATOR