Relative Paths

Absolute Path

Absolute Path হলো এমন একটি পাথ যা application-এর root ("/") থেকে শুরু করে। এটি সম্পূর্ণ(শেষ) এবং নির্দিষ্ট পাথ প্রদান করে।
যখন আমরা absolute path ব্যবহার করি, তখন এটি সবসময় অ্যাপ্লিকেশনের root পাথ থেকে শুরু হয়।
উদাহরণস্বরূপ: /about, /host/income ইত্যাদি।

Relative Path

Relative Path হলো এমন একটি path যা parent বা বর্তমান page-এর ভিত্তিতে তৈরি করা হয়।

• এটি বর্তমান রাউটের context ধরে তৈরি হয়।
• উদাহরণস্বরূপ: "income" বা "reviews"।
  • এখানে /host রুটে থাকা অবস্থায় income এবং reviews রিলেটিভ পাথ হিসেবে কাজ করে।

Example Absolute Path

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 />} />
<!--            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;

Code-এর সমস্যাঃ যেহেতু আমারা absoulte (/),root থেকে শুরু করছি তাই আমাদের income-এর path /host/host/income হয়েছে। কিন্তু আমারা চাচ্ছি /host/income এই ধরনের path create করতে। এ জন্য আমাদের relatvite path এর সাহায্য নিতে হবে।

---

Example Relative Path

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 />} />

        {/* Nested Routes */}
        <Route path="host" element={<Dashboard />}>
          <Route path="income" element={<Income />} /> {/* Relative Path */}
          <Route path="reviews" element={<Reviews />} /> {/* Relative Path */}
        </Route>
      </Route>
    </Routes>
  </BrowserRouter>
</>

  );
};

export default App;

এখানে root(/) Outlet-এর direct path হিসেবে Home, About, Blog, Contact তাই এদের path হবে /about /contact। আবার root or / এর nested Outlet হিসেবে host define করা হয়েছে। তাই /এর সাথে host যুক্ত হবে। আবার host-এর nested path আছে income ও reviews তাই path হবে /host/reviews। যেহেতু এখানে parent-child সম্পর্ক বিদ্যমান তাই নতুন করে আবার (/ বা root) create এর প্রয়োজন নাই। যেমনঃ

<Route path="/host" element={<Dashboard />}>
          <Route path="/income" element={<Income />} /> {/* Relative Path */}
          <Route path="/reviews" element={<Reviews />} /> {/* Relative Path */}
        </Route>

---

Relative Path ব্যবহার করার মূল কারণ হলো parent-child সম্পর্ক বজায় রাখা এবং nested structure পরিষ্কার রাখা। এটি নতুন root তৈরি না করে parent route-এর সাথে child routes যুক্ত করে।