HashRouter बनाम BrowserRouter

Question

मैं प्रोग्रामिंग के लिए नया हूं जो मेरे लिए समझने के लिए चीजों को थोड़ा मुश्किल बना देता है अगर मैं आधिकारिक डॉक्स पढ़ता हूं।

मैं यहाँ से React Router 4 के बारे में पढ़ रहा था

इस लेख में, लेखक के बारे में <HashRouter>और बात कर रहा था<BrowserRouter>

यह उसने उल्लेख किया है

HashRouter मूल रूप से घटक को रेंडर करने के लिए URL में हैश का उपयोग करता है। चूंकि मैं एक स्थिर एक-पृष्ठ वेबसाइट का निर्माण कर रहा था, इसलिए मुझे इसका उपयोग करने की आवश्यकता थी।

BrowserRouter , घटक को रेंडर करने के लिए यह HTML5 इतिहास एपीआई का उपयोग करता है। इतिहास को पुशस्टेट और रीप्लेस्टेट के माध्यम से संशोधित किया जा सकता है। अधिक जानकारी यहां पाई जा सकती है

अब, मुझे दोनों के लिए महत्व और उपयोग के मामले नहीं मिलते हैं, जैसे कि वह क्या कहता है जब वह कहता है कि इतिहास को पुशस्टेट और रीप्लेस्टस्टेट के माध्यम से संशोधित किया जा सकता है और यह घटक को प्रस्तुत करने के लिए URL में हैश का उपयोग करता है

जबकि BrowserRouter के लिए पहला स्पष्टीकरण पूरी तरह से मेरे लिए अस्पष्ट है, HashRouter के बारे में दूसरा स्पष्टीकरण भी समझ में नहीं आता है, जैसे कि घटक को प्रस्तुत करने के लिए कोई url में हैश (#) का उपयोग क्यों करेगा?

Comments

developer.mozilla.org/en-US/docs/Web/API/History_API

— SLaks

आपने मौजूदा उत्तरों के लिए प्रतिक्रिया नहीं दी। चूंकि वे पहले से ही सीधे सवाल का जवाब देते हैं, इसलिए यह स्पष्ट करना उचित होगा कि प्रश्न की किस तरह की आवश्यकता है।

— एस्टुस फ्लास्क

Answer 1

BrowserRouter

यह इतिहास एपीआई का उपयोग करता है , अर्थात यह विरासत ब्राउज़रों (IE 9 और निम्न और समकालीन) के लिए उपलब्ध नहीं है। क्लाइंट-साइड रिएक्ट एप्लिकेशन example.com/react/route जैसे स्वच्छ मार्गों को बनाए रखने में सक्षम है, लेकिन वेब सर्वर द्वारा समर्थित होने की आवश्यकता है। आमतौर पर इसका मतलब यह है कि वेब सर्वर को सिंगल-पेज एप्लिकेशन के लिए कॉन्फ़िगर किया जाना चाहिए, अर्थात सर्वर साइड पर / प्रतिक्रिया / मार्ग पथ या किसी अन्य मार्ग के लिए भी यही index.htmlसेवा दी जाती है । क्लाइंट की तरफ, रिएक्टर राउटर द्वारा पार्स किया जाता है। प्रतिक्रिया राउटर एक घटक प्रदान करता है जिसे इसे / प्रतिक्रिया / मार्ग के लिए रेंडर करने के लिए कॉन्फ़िगर किया गया था ।window.location.pathname

इसके अतिरिक्त, सेटअप में सर्वर-साइड रेंडरिंग index.htmlशामिल हो सकती है , इसमें रेंडर किए गए घटक या डेटा हो सकते हैं जो वर्तमान रूट के लिए विशिष्ट हैं।

HashRouter

यह URL हैश का उपयोग करता है, यह समर्थित ब्राउज़रों या वेब सर्वर पर कोई सीमा नहीं रखता है। सर्वर-साइड रूटिंग क्लाइंट-साइड रूटिंग से स्वतंत्र है।

बैकवर्ड-कम्पेटिबल सिंगल-पेज एप्लिकेशन इसे example.com/#/react/route के रूप में उपयोग कर सकता है । सेटअप को सर्वर-साइड रेंडरिंग द्वारा समर्थित नहीं किया जा सकता है क्योंकि यह / पाथ जो कि सर्वर साइड पर परोसा जाता है, सर्वर साइड से # / रिएक्ट / रूट URL हैश नहीं पढ़ा जा सकता है। क्लाइंट की तरफ, window.location.hashरिएक्टर राउटर द्वारा पार्स किया जाता है। रिएक्टर राउटर एक घटक को प्रस्तुत करता है जिसे इसे उसी तरह / प्रतिक्रिया / मार्ग के लिए प्रस्तुत करने के लिए कॉन्फ़िगर किया गया था BrowserRouter।

सबसे महत्वपूर्ण बात, HashRouterउपयोग के मामले एसपीए तक सीमित नहीं हैं। एक वेबसाइट की विरासत या खोज इंजन के अनुकूल सर्वर-साइड रूटिंग हो सकती है, जबकि रिएक्ट एप्लिकेशन एक विजेट हो सकता है जो URL में अपनी स्थिति रखता है जैसे example.com/server/side/route#/react/route । कुछ पृष्ठ जिसमें रिएक्ट एप्लिकेशन होता है, सर्वर साइड / सर्वर / साइड / रूट के लिए दिया जाता है , फिर क्लाइंट साइड पर रिएक्टर राउटर एक घटक को प्रस्तुत करता है जिसे पिछले परिदृश्य के समान / प्रतिक्रिया / रूट के लिए रेंडर करने के लिए कॉन्फ़िगर किया गया था ।

Comments

एक अन्य बिंदु - यदि आपको पृष्ठ पर एंकर नेविगेशन की आवश्यकता है (जो स्थान है। यह आम तौर पर डिज़ाइन किया गया था और बॉक्स से बाहर काम करने के लिए माना जाता था) इसे लागू करना थोड़ा कठिन है।

— व्हाइटकनाइट

@iRohitBhatia BrowserHistory आपको सर्वर-साइड रेंडर करने की सुविधा देता है, क्योंकि सर्वर के पास पूर्ण URL तक पहुंच है। सर्वर के पीछे पथ तक पहुँच नहीं है #।

— सेबास्टियन लोइक्स

Answer 2

सर्वर साइड: HashRouter URL में हैश सिंबल का उपयोग करता है, जिसमें सर्वर अनुरोध में सभी बाद वाले URL पथ सामग्री के प्रभाव को अनदेखा किया जाता है (यानी आप "www.mywebsite.com/#/person/john" सर्वर को "www" भेजते हैं) .mywebsite.com "जिसके परिणामस्वरूप सर्वर पूर्व # URL प्रतिसाद लौटाएगा, और फिर पोस्ट # पथ को आपके क्लाइंट पक्ष प्रतिक्रिया अनुप्रयोग द्वारा पार्स द्वारा नियंत्रित किया जाएगा।

CLIENT SIDE: BrowserRouter आपके URL में # सिंबल को नहीं जोड़ेगा, हालाँकि जब आप किसी पेज से लिंक करने या किसी पेज को रीलोड करने की कोशिश करेंगे तो समस्याएँ पैदा होंगी। यदि आपके क्लाइंट प्रतिक्रिया ऐप में स्पष्ट मार्ग मौजूद है, लेकिन आपके सर्वर पर नहीं, तो पुनः लोड करना और लिंक करना (जो कुछ भी सीधे सर्वर को हिट करता है) 404 नहीं लौटा पाया गया।

Answer 3

"बक्सों का इस्तेमाल करें"

HashRouter: जब हमारे पास छोटे क्लाइंट साइड एप्लिकेशन होते हैं जिन्हें बैकएंड की आवश्यकता नहीं होती है, HashRouterतो हम उपयोग कर सकते हैं क्योंकि जब हम URL / स्थान बार ब्राउज़र में हैश का उपयोग करते हैं तो सर्वर अनुरोध नहीं करता है।

BrowserRouter: जब हमारे पास बड़े उत्पादन-तैयार अनुप्रयोग होते हैं जो बैकएंड की सेवा करते हैं, तो इसका उपयोग करने की सिफारिश की जाती है <BrowserRouter>।

संदर्भ पुस्तक: लर्निंग रिएक्ट: फंक्शनल वेब डेवलपमेंट विथ रिएक्ट एंड रिडक्स बाय एलेक्स बैंक्स, ईव पोर्सलो

Comments

Imho "HashRouter" बनाम "BrowserRouter" का "छोटे" बनाम "बड़े उत्पादन-तैयार" अनुप्रयोगों से कोई लेना-देना नहीं है। बड़े उत्पादन-तैयार अनुप्रयोगों में HashRouter का उपयोग करने की न तो सीमाएं हैं और न ही प्रदर्शन के मुद्दे। यह सभी विशिष्ट उपयोग के मामले, आवश्यकताओं और परिणामी वास्तुकला के बारे में है। सर्वर रहित उत्पादन अनुप्रयोग एक असली चीज़ है।

— पावेल सास

Answer 4

दोनों BrowserRouterऔर HashRouterघटकों को Routerकक्षा के उपवर्गों के रूप में रिएक्ट राउटर ver.4 में पेश किया गया था । बस, BrowserRouterआपके ब्राउज़र में वर्तमान URL के साथ UI को सिंक करता है, यह HTML-5 इतिहास एपीआई के माध्यम से किया जाता है। दूसरी ओर, HashRouterआपके URL के हैश भाग को सिंक करने के लिए उपयोग करता है।

Answer 5

पृष्ठ को ताज़ा करने से ब्राउज़र वर्तमान मार्ग का उपयोग करके सर्वर को GET अनुरोध भेजने का कारण बनता है। # का उपयोग हमें उस GET अनुरोध को भेजने से रोकने के लिए किया गया था। हम BrowserRouter का उपयोग करते हैं क्योंकि हम चाहते हैं कि GET अनुरोध सर्वर पर भेजा जाए। राउटर को सर्वर पर रेंडर करने के लिए, हमें एक स्थान की आवश्यकता है - हमें मार्ग की आवश्यकता है। राउटर को रेंडर क्या करना है यह बताने के लिए इस मार्ग का उपयोग सर्वर पर किया जाएगा। जब आप मार्गों को समसामयिक रूप से रेंडर करना चाहते हैं तो BrowserRouter का उपयोग किया जाता है।

Answer 6

एक और उपयोग मामला मैं जोड़ना चाहता हूं। BrowserRouter या Router का उपयोग करते समय, यह हमारे नोड सर्वर पर ठीक काम करेगा। क्योंकि इसकी समझ क्लाइंट रूटिंग (Preconfigured) है।

लेकिन जब हम अपाचे सर्वर पर हमारे बिल्ड रिएक्ट ऐप को तैनात करते हैं (बस पीएचडी को गोएड्डी पर कहते हैं), तो राउटिंग अपेक्षा के अनुरूप काम नहीं करेगा। यह 404 में उतरेगा, इसके लिए हमें .htaccess फाइल को कॉन्फ़िगर करना होगा । उसके बाद मेरे लिए भी प्रत्येक क्लिक / url, सर्वर को भेजने का अनुरोध।

उस मामले में बेहतर है कि हम एचएएसएच रूटिंग (#) का उपयोग करें। # हम इसका उपयोग अपने HTML पेज पर करते हैं, HTML सामग्री में ट्रैवर्सिंग के लिए और इससे सर्वर अनुरोध नहीं होगा।

उपरोक्त परिदृश्य में हम HashRout का उपयोग कर सकते हैं, वह सब url है जो # के बाद मौजूद है, हम अपने रूटिंग नियमों को एसपीए के रूप में काम करने के लिए रख सकते हैं।

Answer 7

मूल रूप से अगर कोई BrowserRouter का उपयोग करता है तो कोई url जैसे "soAndSoReactPage /: id" का उपयोग कर सकता है

उदाहरण के लिए:

with a Route <Route path="soAndSoReactPage/:id"><soAndSoReactComponent/></Route>

अब, प्रतिक्रिया घटक "soAndSoReactComponent" में "id" का उपयोग कर उपयोग किया जा सकता है और फिर इस प्रकार आप id के अनुसार "soAndSoReactComponent" पृष्ठ प्रदर्शित कर सकते हैं।

ऐसा नहीं किया जा सकता है