Up next in 10
React Router Setup + Usage _ Complete React Course in Hindi #16
39 views
Feb 10, 2024
The video "React Router Setup + Usage _ Complete React Course in Hindi #16" is likely a tutorial within a React course presented in Hindi. In this video, viewers are guided through the process of setting up and utilizing React Router, a popular library for handling routing in React applications. Routing is essential for managing navigation within single-page applications, allowing users to navigate between different views or pages without refreshing the entire page. The instructor likely demonstrates how to install and configure React Router, as well as how to use its components, such as BrowserRouter, Route, and Link, to define and navigate between routes in a React application. Through explanations and practical examples provided in Hindi, viewers can gain a solid understanding of how to implement routing functionality effectively in their React projects. This tutorial aims to empower Hindi-speaking audiences with the skills needed to create dynamic and multi-page applications using React Router.
View Video Transcript
0:00
तो गैस पिछले वीडियो में हम लोगों ने title वगैरा set किया था और हमने काफी चीज़ें सीखी थी हमने ये देखा था कि इस तरह से हम लोग title को flash कर सकते हैं अल्दु ये अच्छा user experience नहीं होता है उसके बाद भी यहाँ पर हम लोगों ने देखी थी ये सब चीज़ें कैसे �
0:30
वो तो क्यों करोगे, ये YouTube का home page है, ठीक है, और यहाँ पर बहुत सारे videos है, अब देखना है यहाँ पर, कि अगर मैं कोई भी एक typical website की बात करता हूँ, कोई भी website हो सकती है, ठीक है, ये वाली ले लेते है, website.com, ठीक है, ये एक single page application framework के द्वारा नहीं बनी गई, यह आप देख�
1:00
जो home page है, ऐसे YouTube, अगर मैं music में जाओं, या sports में जाओं
1:03
gaming में जाओं, movies में जाओं, या यह चीज तो change होने वाली है नहीं, ठीक है
1:08
यह चीज तो change हो नहीं रही है, यह मेरा YouTube, India ऐसे कैसे लिखा हुआ है, यहां पर लिखा हुआ है सर्च बार यहां पर बना हुआ यह यहां पर बना हुआ यह यहां पर यहां पर यह चीज चेंज होनी रही है न�
1:17
चीज चेंज हो रही है, home, explore, subscriptions, library, history, कुल मिला क�
1:21
ये content change हो रहा है, तो instead of कि मैं navbar को बापस ले कर आओं server से
1:27
इतना सारा data खर्च करवाओं, user का भी, server की भी bandwidth खर्च करवाओं
1:31
और इतना सारा data ले कर आओं, इतने data को transport करने से अच्छा मै�
1:35
सिर्फ इतनी data को ये जो topic है यहाँ पर ये चीज है ये image है ये structure है इस चीज को ले आ�
1:41
वो बढ़िया रहेगा ठीक है तो यहाँ पर हम क्या करेंगे कि instead of bringing the entire page कि यार ये भी आ रहा है ये भी आ रहा ह�
1:49
हम गएगे कि आज जो चीज है हमारी single page application में वो तो है ही बस इतनी जगा पर हमें कोई दूसरा component fit कर देंग�
1:56
अगर हम react में application बना रहे हैं obviously तब तो मैं यहाँ पर react point of view से बना रहा हू�
2:00
अब यहाँ पर single page application में अगर हम कुछ इस तरह का काम करेंग�
2:03
पर example मालो sports पर मैंने click किया तो आप देखो ये page reload नहीं हो रहा ह�
2:07
देख रहो आप लोग page reload नहीं हो रहा है gaming पर click किया page reload नहीं हो रहा है देखना उपर आप लोग यहाँ प�
2:12
नहीं हुआ page reload जहाँ पर मैं था वहाँ पर तो हुँ ही औ�
2:15
यहाँ पर load होते हुए मुझे दिखाई पढ़ रहा है यह देख रहो नविगेशन कितना स्पून्थ है तो यही का�
2:21
रियाक्ट राउटर डॉम के द्वारा किया जाएगा अगर आप लिख आपकी एप्लीकेशन रियाक्ट में बनी हुई है तो आ�
2:27
purpose सबको समझ में आ गया है कि क्यों use करेंगे react router तो router से क्या होगा कि हम एक जगा पर component change कर सकते हैं और यह जो component हम लोग change कर रहे हैं for example यहाँ पर text tutors का home page है अब मैं चाहता हूँ about पर click करूँ सिर्फ इतनी चीज यहाँ पर जो है change होकर आ जाए और मेरा यह जो nav bar है वो यहीं क�
2:57
हमने examples भी देख लिये, YouTube की website देख लिये, अगर वैसे react से बनी है, नहीं बनी है, I don't know
3:02
but अगर react से बनी होती, तो क्या idea होता, codewithharry.com को मैंने angular में बनाया है
3:07
तो आप codewithharry.com भी जाकर देखते हो, तो वहाँ पर भी आप लोग को इसी तरह की चीज नजर आएगी
3:50
करेंगे तो यही चीज करता हूं मैं भी यहां पर ठीक है तो मैं यहाँ पर एक नया टर्मिनल खोल लेता हूं और इस चीज को पेस्ट करके एंटर मार देता हूं मेरा रियक्टर ऑटो डॉम जो है वो इंस्टॉल हो जाएगा यह एक एक्स्टरनल पैकेज है ठीक है अब मैं �
4:20
तो मैं यहाँ पर about लिख दूंगा कुछ इस तरह से और मैं चाहूँगा कि about वाला component मेरा show हो जाए ठीक ह�
4:25
तो मैं कुछ इस तरह से about वाला component को ले आऊंगा और about को import भी कर लूँगा तो यहाँ पर देख�
4:31
जो मेरा about component है वो मैं यहाँ पर ले आऊंगा आप देख रहे ह�
4:36
import about from about ठीक है तो मैंने एक about component बनाया था अगर आपको याद हो त�
4:40
तो यह about component को मैं यहाँ पर लाना चाहूँगा अगर कोई भी मेरा user
4:44
क्लिक करता है कहां पर अब आउट पर और मैं चाहूंगा कि यह कंपनेंट हट जाए तो अभी अगर मेरी वेबसाइट वह देखेग�
4:50
तो कुछ इस तरह से दिखेगी अब वाला जो कंपोनेंट है वह यहां पर आ जाएगा मैंने आप एक इनेबल डार्क मोड इनेबल लाइ�
4:56
बनाया था जो कि बहुत ही अजीव सा दिख रहा था बट अगेन मैंने जस्ट आप लोग को एक बहुत ही बेसिक आइडिया देने क�
5:02
लिए चीज बनाई थी यह हमारा असली डाफिन पोड़ देखो भी अच्छा लग रहा है और ऑफिसली हम इस पर भी इस डाफ The
5:07
इंपोज कर सकते हैं ठीक है स्टाइल वगैरह को यूज करके बट अभी के लिए मैं उस चीज को नहीं कर रहा हूं ठीक है त�
5:13
यहां पर हम यह ट्राउट ऑफ टॉप को इंस्टॉल करेंगे सबसे पहला स्टेप यह देखते हैं इंस्टॉल हुआ कि नहीं हुआ हा�
5:18
गया यह ट्राफ्ट डाउम इंस्टॉल हो गया और मैं इसको मैं यहां पर क्या करूंगा कि इसको वापस से एनपीएम र�
5:23
स्टार्ट भी कर लूंगा और यह मुझसे गरेट टेक्स फॉर्म आपने डिफाइन किया यह यूज नहीं किया लेकिन तो इस तरह क�
5:28
पर निकसी देता रहता है ठीक है तो टेक्स ट्यूटल्स का होम पेज आ गया यहां पर मैंने अब और रख दिया अ�
5:33
अगर मैं यहां पर यह रख देता हूं टेक्स फॉर्म रख देता हूं तो टेक्स फॉर्म दिखाई पड़ेगा पर इस चीज क�
5:38
automatic चाहता हूं, मैं नहीं चाहता कि manually about को हटाओं, और लगाओं, और फिर
5:43
मतलब obviously आपकी website पर लोग चाहेंगे, कि about पर click करें, उसके बाद वो about component को देखें
5:48
यह चाहेंगे लोग, ठीक है, तो हम क्या करेंगे, react router का इस्तेमाल करेंगे
5:52
सबसे पहले हम क्या करेंगे react router में से इस चीजें import करेंग�
5:56
क्या-क्या import किया हुआ इन्होंने मैं आपको दिखाता हूँ आप इसको पूरा copy करके यहाँ पर ले आ�
6:00
ठीक है आप यहाँ पर देखो मैंने about component भी import करा हुआ है और मेरे पास यहाँ पर मेरा text form component भी ह�
6:06
दोनों को हम लोग इस्तेमाल करेंगे देखना कैसे हमने browser router as router import किया हु�
6:10
यानि कि मैं router नाम से browser router को पुकार सकता हूँ और switch हमने import किया हुआ ह�
6:16
route import किया हुआ है link import किया हुआ है from this package react router dom जो क�
6:19
एक package है हमने npm से अभी भी install किया ठीक है अब मैं क्या करूँगा देखो यार मुझे कुछ रटा रटाया नहीं ह�
6:25
ठीक है to be very honest मैं क्या करूँगा इस documentation का इस्तेमाल करूँग�
6:29
मुझे बस idea है चीजे कैसे होती है मैंने पहले किया हुआ ह�
6:32
और आप भी अगर एक बार मेरे साथ करते हो और 6 माइने बद आपसे कोई कहता है कि इसको करो तो आपको याद रहेगा कि हाँ बाई मैंने व�
6:38
course किया था react.js वाला और उसमें मैंने बताया था आप लोगों कैसे कैसे किया जाता है तो आप इस पेज़ प�
6:44
official page
7:15
तो ऐसे के ऐसे ही बैठ गया मेरी application में मैं चाहता हूँ मेरे पास कोई slash users नहीं ह�
7:19
तो ये वाला route मैं हटा दूँगा ठीक है ना मेरे पास users component है ना मेरे पास home component ह�
7:24
in fact मेरे पास तो एक text form component है जिसको मैं show करूँगा अगर क्या होग�
7:29
अगर कोई भी slash पे आता है लिया अब एक चीज और करूंगा मैं क्या करूंगा कि अब देखो अगर मैं अपनी टेक्स यूटल्स आप में आउट रिलोड करके आपको दिखाओ तो यहां पर देखो यहां पर देखो इन वेरियंट फेल यू शुट टॉट यूज स्विच आउटसाइड राउटर ठीक ह�
8:15
हमारा, okay, so div हमारा यहाँ पर बंद हो रहा है, तो div को हमें चगा पर बंद करना होगा, और अब हमारी app जो है, start हो गई है, अब मैं about प�
8:21
click करूँगा, तो मेरा about component तो नहीं जा रहा है, लेकिन अगर मैं slash about करूँगा
8:25
और enter मारूँगा, तो देखो मेरा about component खुल गया है, यानि कि in some way
8:29
ये react router काम कर रहा है, ठीक है, अब इस चीज़ को मैं कैसे fix करूँगी
8:34
यहाँ पर click करते ही मैं about पर आ जाओं, यहाँ click करते ही मैं home पर आ जाओं, तो अगर आप यहाँ पर आओं, तो आप देखों
8:39
तो इन्होंने link2 is equal to का इस्तेमाल किया हुआ, link और 2 का इस्तेमाल किया हुआ, तो मैं क्या करूँगा, जो मेरा nav bar है, उसके अंदर जहां जहां a और href यूज़ किया हुआ
8:47
वहाँ मैं क्या करूँगा, link और 2 यूज़ करूँगा, ठीक है, तो मेरे nav bar के अंदर एक item यह ह�
8:52
home पर click करूँ तो मैं link और to use करूँगा तो सबसे पहले तो मैं यहाँ पर link use करूँग�
8:57
और उसके बाद यहाँ पर href की जगा पर to use करूँगा यह काम मैं home पर भी करूँग�
9:00
यह काम मैं about पर भी करूँगा और यहाँ पर slash about कर दूँगा इस रिफ्ट में और यहाँ पर मैं two कर दूँगा और यहाँ पर एक चेका link कर दूँगा ठीक है और obviously मैं link को import भी करूँगा from reactor out or dom मैंने enter मारा तो यह automatically देखो इसने import भी कर लिया link from reactor out or dom ठीक है तो अभी देखते है application चल रही है कि नहीं चल रह�
9:32
हमारी website इतनी fast हो इस तरह से fast हो और reload भी ना हो page हमारा ठीक है तो यहाँ प�
9:37
ऐसा लग रहा है कि जैसे कोई mobile app हो कोई android app हो ठीक है अब देखो यहाँ पर मैंने text
9:42
tutorials में a और href यूज किया हुआ है तो देखो ऊपर page reload हो रहा है इस पर click करने में इ�
9:46
इस बेहवियर को ठीक करने के लिए मान लो मैं अगर अबाउट में भी हूँ तब भी मैं text-reutels पर click करूँगा तो मेरा page रिलोड होग�
9:52
देख रहे हो रिलोड हो रहा है तो इस behavior को ठीक करने के लिए जहां जहां मैंने एयरएचरफ यूज किया हुआ वहां पर मैं लिंग कॉट यूज करूंगा तो यहां पर मैं लिंक यूज करूंग�
10:00
लिंक और एचरफ की जगह पर टू ठीक है तो लिंग कॉट यूज करूंगा मैं तो लिंग कॉट यूज करने से क्या होग�
10:23
देखेंगे और देखेंगे बट यह बहुत ही बेसिक यूज रियक्ट राउटर का जो कि हमें टेक्स्ट यूटल्स के लिए चाहि�
10:28
था अब इस एक्जांपल लोगों ने दिए हुए अब रियक्ट राउटर में एक चीज और होती है जो राउट होता है उसमें आ�
10:32
एक component पास कर सकते हो, आप render is equal to करके
10:37
एक पूरा पूरा, वहीं पर component बना सकते हो, राउट के अंदर ही, but this is the easiest way to do it
10:42
जो हमने अभी करा, और सबसे जादा, मैं गाऊंगा, 60 to 70% of the time
10:46
और अगर आप एक beginner हो, तो maybe 80 to 90% of the time, अपनी तरह से इस्तेमाल करोगे
10:50
react router को, और, एक चीज़ यहाँ पर और बोलना चाहूँगा, जो की
10:54
थोड़ी सी important है, और वो क्या है, अब हमने यहाँ पर क्या किया
10:59
कि, path is equal to किया था, मैं दिखाता हूँ आपको, कहाँ पर मैं, बात कर रहा हूँ path is equal to किया था route में ठीक है path is equal to about path is equal to slash हमें यहाँ पर exact लिखना पड़ेगा अगर हम चाहते हैं कि exactly हमारा match होने पर ही आया अभी तो देखो हमारी application में तो कोई फर्क नहीं पड़ा but it's always a good idea to use exact path is equal to ऐसा क्यों बोला मैंने ऐसा मैंने इसलिए बोला क्योंकि �
11:32
अगर मान लो आपका एंड पॉइंट है, मैं काम करता हूँ, कंट्रोल लेन करके एक फाइल बनाता हूँ
11:36
यूजर्स है और एक है आपका यूजर स्लाश होम, ठीक है, तो अगर आप इस वाले URL में जाने की कोशिश करोगे, तो react router इसको match करके
11:45
कि आपको इसके corresponding letters से आप component 1 को render कर रहे ह�
11:51
and letters से आप इसके corresponding component 2 को render कर रहे ह�
11:55
तो क्या होगा अगर आपने exact use नहीं कर रहा है तो जब आप ये URL पर जाओगे तब भी component 1 ही render हो जाएगा और आप लोग परशान हो जाओगे क्यों हो रहा ह�
12:01
तो react जो है partial matching करता है, आपको complete matching करने के लिए exact लिखना पड़ेगा
12:06
it's always a good idea, मैं in fact एक काम करता हूँ, इसे cancel करके, copy करके लिख देता हूँ
12:11
ताकि आप लोग को, याद रहे कि मैंने ये exact वाली बात आपको बताई दी
12:15
तो मैं इसको यहाँ पर code base में डाल देता हूँ जो कि it's about learning या�
12:19
तो मैं इसको code base में डाल देता हूँ मैंने इसको code base में डाल दिया भी ठीक ह�
12:23
तो slash users component 1 slash users slash home component 2 कुछ इस तरह से आप लोग यहाँ प�
12:30
इसको समझ सकते हो ठीक है आपकी समझ में आ गया और आपकी यह चीज आप लोगों को बहुत बढ़िया तरह समझ में आ गया ठीक है आने वाले वीडियोस में हम लोग क्या करेंगे इसी application को और आगे लेकर जाएंगे और concept जेखेंगे react के but I hope कि हम काफी आगे आ चुके हैं और यह जो app हमारी almost completion तक आ �
13:02
आप इसको यहां पर समझ गए इन सब चीजों को प्लेलिस्ट को जरूर एक्सेस कर लेना यह क्लिक करके सेवर लेना इस प्लेलिस्ट को और यहां क्लिक करके इस प्लेलिस्ट को बुकमार्क जरूर कर लेना अभी के लिए इस वीडियो में इतना है गैस थैंक यू सो मच गैस �
13:32
प्रस्तुति पर प्रस्तुति प�