React Academy · पाठ

Nested Routes और Route Params

जानें कि parent route child views को कैसे render करता है और route parameters (जैसे /products/42) IDs को components तक कैसे पहुँचाते हैं।

पाठ 2, कुल 3 में से8 चरण

Nested Routes और Route Params, CoddyKit पर React Academy का एक निःशुल्क पाठ है। यह 3 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह React Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Academy पाठ्यक्रम में कुल 3 पाठ शामिल हैं।

नेस्टेड रूट और पैरामीटर क्यों

लक्ष्य: नेस्टेड रूट यानी ऐसे मूल पृष्ठ जो चाइल्ड दृश्य रेंडर करते हैं और रूट पैरामीटर यानी /products/42 जैसे परिवर्तनीय यूआरएल भागों को समझें।

मूल पृष्ठ और आउटलेट की अवधारणा

मूल पथ, जैसे /products, लेआउट और एक आउटलेट रेंडर करता है। चाइल्ड पथ, जैसे /products/:id, उस आउटलेट में विशिष्ट सामग्री भरते हैं।

पैरामीटर क्या होते हैं

रूट पैरामीटर यूआरएल से मान प्राप्त करते हैं, जैसे :id। घटक उस पैरामीटर को पढ़कर मेल खाते रिकॉर्ड का डेटा लाते या उसे दिखाते हैं।

डेमो: नेस्टेड रूट और पैरामीटर

हैश-आधारित डेमो: मूल /products पथ एक सूची दिखाता है; किसी आइटम का चयन करने पर नेविगेशन /products/ID पर जाता है और चाइल्ड दृश्य को अंदर रेंडर करता है।


<div id="root"></div>

पैरामीटर पढ़ना और लिंक बनाना

पैरामीटर पढ़ना: यूआरएल को पार्स करें या राउटर हुक का उपयोग करके id प्राप्त करें और डेटा लोड करें। लिंक बनाना: सूचियों से /products/ID जैसे पथ बनाएँ।

सुझाव और सावधानियाँ

सुझाव:

मूल लेआउट छोटा रखें; चाइल्ड सामग्री को आउटलेट क्षेत्र में रेंडर करें।
उपयोग से पहले पैरामीटर का मान्यकरण करें।
न मिलने वाली आईडी को उचित ढंग से संभालें।

रूट पैरामीटर का उद्देश्य

/users/42 जैसे यूआरएल में रूट किए गए घटक में 42 का उपयोग आम तौर पर किस लिए किया जाता है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

पुनरावलोकन: मूल रूट लेआउट देते हैं; चाइल्ड रूट आउटलेट में रेंडर होते हैं। यूआरएल से आईडी प्राप्त करने और सही रिकॉर्ड दिखाने के लिए रूट पैरामीटर का उपयोग करें।

शुरुआत निःशुल्क

एआई शिक्षक के साथ React सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 88
पाठ: 324

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Nested Routes और Route Params” पाठ निःशुल्क है?

हाँ—“Nested Routes और Route Params” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और React Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। React Academy पाठ्यक्रम में कुल 3 पाठ शामिल हैं।

“Nested Routes और Route Params” में मैं क्या सीखूँगा?

जानें कि parent route child views को कैसे render करता है और route parameters (जैसे /products/42) IDs को components तक कैसे पहुँचाते हैं। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या React Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 3 में से 2वाँ पाठ है।

“Nested Routes और Route Params” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस React Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर React Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← React Academy पर वापस जाएँ