रिएक्ट राउटर का उपयोग करके रिएक्ट में 404 पेज कैसे बनाएं

जल्दी या बाद में, एक उपयोगकर्ता एक ऐसे URL पर जाएगा जो आपकी वेबसाइट पर मौजूद नहीं है। इसके बाद उपयोगकर्ता क्या करता है यह आपके ऊपर है।

वे बैक बटन दबा सकते हैं और आपकी साइट छोड़ सकते हैं। इसके बजाय, आप उन्हें आपकी वेबसाइट पर नेविगेट करना जारी रखने में मदद करने के लिए एक उपयोगी 404 पृष्ठ प्रदान कर सकते हैं।

रिएक्ट वेबसाइटों के लिए, आप एक उपयोगी 404 नहीं मिला पृष्ठ बनाने के लिए रिएक्ट राउटर का उपयोग कर सकते हैं।

404 पेज बनाना

404 त्रुटि तब होता है जब आप किसी वेबसाइट पर किसी ऐसे पृष्ठ पर जाने का प्रयास करते हैं जिसे सर्वर नहीं ढूंढ पाता। एक डेवलपर के रूप में, 404 त्रुटियों को संभालने का अर्थ है एक ऐसा पृष्ठ बनाना जिसे सर्वर अनुरोधित पृष्ठ नहीं मिलने पर प्रतिस्थापन के रूप में उपयोग करता है।

रिएक्ट में, आप एक ऐसा नॉट फाउंड कंपोनेंट बनाकर ऐसा करते हैं जो उन रूट्स पर रेंडर होगा जो मौजूद नहीं हैं।

यह लेख मानता है कि आपके पास रूटिंग सेट अप के साथ पहले से ही एक कार्यशील रिएक्ट एप्लिकेशन है। यदि आप नहीं करते हैं, एक रिएक्ट एप्लिकेशन बनाएं और फिर स्थापित करें प्रतिक्रिया राउटर.

NotFound.js नामक एक नई फ़ाइल बनाएँ और 404 पृष्ठ बनाने के लिए निम्न कोड जोड़ें।

आयात { जोड़ना } से "प्रतिक्रिया-राउटर-डोम";
निर्यातगलती करनासमारोहनहीं मिला() {
वापस करना (
<डिव>
<एच 1>उफ़! ऐसा लगता है कि आप खो गए हैं।</h1>
<पी>यहाँ कुछ उपयोगी लिंक दिए गए हैं:</पी>
<से लिंक ='/'>घर</Link>
<से लिंक ='/blog'>ब्लॉग</Link>
<से लिंक ='/contact'>संपर्क</Link>
</div>
 )
}

यह 404 पृष्ठ एक संदेश प्रदान करता है और उपयोगकर्ता को वेबसाइट पर सामान्य पृष्ठों पर पुनर्निर्देशित करने के लिए लिंक करता है।

404 पृष्ठ पर रूटिंग

आप इस तरह रिएक्ट राउटर का उपयोग करके एक सामान्य मार्ग बना सकते हैं:

आयात {मार्ग, मार्ग} से "प्रतिक्रिया-राउटर-डोम";
समारोहअनुप्रयोग() {
वापस करना (
<मार्गों>
<मार्ग पथ ="/" तत्व = { <घर/> }/>
</Routes>
 )
}

आप URL पथ और वह तत्व निर्दिष्ट करते हैं जिसे आप उस मार्ग पर प्रस्तुत करना चाहते हैं।

404 पृष्ठ उन रास्तों को प्रदर्शित करता है जो वेबसाइट पर मौजूद नहीं हैं। इसलिए, पथ निर्दिष्ट करने के बजाय, तारक चिह्न का उपयोग करें (*).

<मार्ग पथ ='*' तत्व = {<नहीं मिला />}/>

का उपयोग करते हुए * मार्गों में निर्दिष्ट नहीं किए गए सभी URL के लिए NotFound घटक प्रस्तुत करता है।

प्रतिक्रिया में रूटिंग

आप राउटर का उपयोग करके आसानी से उन सभी URL के लिए 404 पृष्ठ बना सकते हैं जो आपके रिएक्ट वेब ऐप में मौजूद नहीं हैं।

ब्राउज़र के पास एक डिफ़ॉल्ट 404 पृष्ठ होता है, लेकिन एक कस्टम पेज बनाने से आप अपने उपयोगकर्ताओं को बता सकते हैं कि क्या गलत हुआ और वे इसे कैसे ठीक कर सकते हैं। आप एक 404 पृष्ठ भी बना सकते हैं जो आपके ब्रांड के अनुकूल हो।