## 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 ( <> }> } /> } /> } /> } /> } > } /> } /> ); }; 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 ( <> <> }> } /> } /> } /> } /> {/* Nested Routes */} }> } /> {/* Relative Path */} } /> {/* Relative Path */} ); }; 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 এর প্রয়োজন নাই। যেমনঃ ``` }> } /> {/* Relative Path */} } /> {/* Relative Path */} ``` --- Relative Path ব্যবহার করার মূল কারণ হলো parent-child সম্পর্ক বজায় রাখা এবং nested structure পরিষ্কার রাখা। এটি নতুন root তৈরি না করে parent route-এর সাথে child routes যুক্ত করে।

reactrouterrelativepaths

Relative Paths

Join Our Newsletter. No Spam, Only the good stuff.