रिएक्ट राउटर में इंडेक्स रूट

इस पाठ में हम जानेंगे कि इंडेक्स रूट क्या होते हैं।

शुरुआत के लिए, आइए एक बात पर ध्यान दें। जब हम होमपेज पर होते हैं, तो दाईं ओर हमें बस एक खाली स्क्रीन दिखाई देती है। ऐसा इसलिए है क्योंकि कोई भी चाइल्ड रूट एड्रेस / से मेल नहीं खाता, और हमने इस मामले में क्या दिखाना है यह नहीं बताया। ऐसे में, खाली पेज न दिखाने के लिए हम इंडेक्स रूट का उपयोग कर सकते हैं - यह एक ऐसा चाइल्ड रूट है जिसका कोई पथ नहीं होता, और इसका एलिमेंट पैरेंट Outlet में तब दिखाई देता है जब कोई भी चाइल्ड रूट के सेट से मेल नहीं खाता। ऐसे रूट्स का उपयोग किसी भी प्रकार की जानकारी, या सांख्यिकी, या ऐसा ही कुछ और दिखाने के लिए किया जा सकता है। सामान्य रूट्स की तरह ही, इनका उपयोग डेटा लोड करने के लिए भी किया जा सकता है।

आइए routes फोल्डर में index.jsx फाइल बनाएं, और इसमें Index कम्पोनेंट बनाएं:

routes/index.jsxexport default function Index() {
  return (
    <div>
      <p>नमस्ते, रिएक्ट राउटर!</p>
      <p>यह मेरे उत्पादों के लिए एक एप्लिकेशन है :)</p>
    </div>
  );
}

अब main.jsx पर जाएं और वहां अपना Index कम्पोनेंट इम्पोर्ट करें:

main.jsximport Index from './routes/index';

और children ऐरे में पहले एलिमेंट के रूप में एक ऑब्जेक्ट जोड़ें, जहां प्रॉपर्टी index true पर सेट हो, और डिस्प्ले के लिए एलिमेंट हमारा Index कम्पोनेंट हो:

main.jsx{ index: true, element: <Index /> },