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 হবে।