Index Routes

Index Routes, React Router-এর একটি বিশেষ বৈশিষ্ট্য যা একটি route-এর default child নির্দেশ করে। যখন কোনো parent route-এর কোনো নির্দিষ্ট child route উল্লেখ করা না হয়, তখন index route parent-এর default content হিসেবে কাজ করে।

Index Routes এর বৈশিষ্ট্য:

Parent Route-এর Default Content:

• Parent route visit করলে index route render হয়।

• এটি child routes-এর মধ্যে একটি "default" হিসেবে কাজ করে।

• path attribute নির্ধারণ করতে হয় না।

• Nested routes-এর মধ্যে এমন একটি page দেখানোর জন্য যা default হিসেবে কাজ করবে

Syantax: <Route index element={<Component />} />


<BrowserRouter>
    <Routes>
      <Route element={<Layout />}>
        <Route index 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>

এখানে Layout component/Outlet এর মধ্যে index ব্যবহার করা হয়েছে। এর অর্থ যখন Layout component/Outlet render হবে default ভাবে Home component rendered হবে।