Nested Routes

Nested Routes কী?

Nested Routes হলো একটি root এর মধ্যে এক বা একাধিক root বা child root set করা। অর্থাৎ একটি page-এর একাধিক sub-page।

ব্যবহার ক্ষেত্র

১. যদি একটি page-এর মধ্যে অনেক sub-page থাকে, Nested Routes ব্যবহার করলে code এবং routing structure clean থাকে।

1. Parent page-এর নির্দিষ্ট অংশে child root-এর content render হয়। যেমন: dashboard মধ্যে Settings বা Profile page দেখানো।
2. 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