React.js में ब्रेडक्रंब कैसे बनाएं

क्या आपने कभी कुछ वेबसाइटों पर पाठ के उन छोटे टुकड़ों पर ध्यान दिया है जो साइट के भीतर आपके वर्तमान स्थान को दर्शाते हैं? उन्हें ब्रेडक्रंब कहा जाता है, और वे उपयोगकर्ताओं को उन्मुख करने का एक सहायक तरीका हो सकते हैं, खासकर जटिल वेबसाइटों के माध्यम से नेविगेट करते समय। यह लेख आपको दिखाएगा कि React.js में ब्रेडक्रंब कैसे बनाया जाता है।

ब्रेडक्रंब क्या हैं और वे कैसे महत्वपूर्ण हैं?

ब्रेडक्रंब आमतौर पर टेक्स्ट के छोटे टुकड़े होते हैं जो किसी वेबसाइट के भीतर वर्तमान स्थान दिखाते हैं। वे उपयोगकर्ताओं को उन्मुख करने में सहायक हो सकते हैं, विशेष रूप से कई पृष्ठों वाली वेबसाइटों के माध्यम से नेविगेट करते समय। लिंक्स का एक निशान प्रदान करके, ब्रेडक्रंब उपयोगकर्ताओं को यह समझने में सहायता कर सकते हैं कि वे वेबसाइट के भीतर कहां हैं और उन्हें पिछले अनुभागों में आसानी से नेविगेट करने की अनुमति देते हैं।

यह ध्यान रखना महत्वपूर्ण है कि किसी वेबसाइट पर नेविगेशन के प्राथमिक साधन के रूप में ब्रेडक्रंब का उपयोग नहीं किया जाना चाहिए। बल्कि, उन्हें अन्य नेविगेशन तत्वों जैसे मेनू या खोज बार के अतिरिक्त उपयोग किया जाना चाहिए।

React.js में ब्रेडक्रंब कैसे बनाएं

React.js में ब्रेडक्रंब बनाने के दो मुख्य तरीके हैं: प्रतिक्रिया-राउटर-डोम पुस्तकालय या का उपयोग करके उपयोग-प्रतिक्रिया-राउटर-ब्रेडक्रंब पुस्तकालय। लेकिन शुरू करने से पहले, आपको करना होगा एक रिएक्ट ऐप बनाएं.

विधि 1: प्रतिक्रिया-राउटर-डोम लाइब्रेरी का उपयोग करके

प्रतिक्रिया-राउटर-डोम लाइब्रेरी के साथ, आप अपने रिएक्ट एप्लिकेशन में प्रत्येक पथ के लिए मैन्युअल रूप से ब्रेडक्रंब बना सकते हैं। पुस्तकालय एक प्रदान करता है घटक जिसका उपयोग ब्रेडक्रंब बनाने के लिए किया जा सकता है।

प्रतिक्रिया-राउटर-डोम लाइब्रेरी का उपयोग करने के लिए, आपको पहले इसे npm का उपयोग करके इंस्टॉल करना होगा:

NPM स्थापित करना प्रतिक्रिया-राउटर-डोम

एक बार पुस्तकालय स्थापित हो जाने के बाद, आप इसे अपने रिएक्ट घटक में आयात कर सकते हैं:

आयात { जोड़ना } से 'प्रतिक्रिया-राउटर-डोम'

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

<से लिंक ="/">घर</Link>
<से लिंक ="/products">उत्पादों</Link>
<से लिंक ="/products/1">उत्पाद 1</Link>

अब, आप ब्रेडक्रंब में कुछ स्टाइल जोड़ सकते हैं और उस वर्तमान पृष्ठ को हाइलाइट कर सकते हैं जिस पर आप हैं। उसके लिए, आप का उपयोग कर सकते हैं कक्षा का नाम का सहारा अवयव। वर्तमान पथनाम प्राप्त करने के लिए, आप इसका उपयोग कर सकते हैं जगह प्रतिक्रिया-राउटर-डोम पुस्तकालय से वस्तु:

आयात {लिंक, स्थान का उपयोग करें} से 'प्रतिक्रिया-राउटर-डोम'
समारोहब्रेडक्रम्ब्स() {
कॉन्स्ट स्थान = उपयोग स्थान ();
वापस करना (
<एनएवी>
<से लिंक ="/"
 वर्गनाम = {स्थान.पथनाम "/"? "ब्रेडक्रंब-सक्रिय": "ब्रेडक्रंब-नहीं-सक्रिय"}
>
 घर
</Link>
<से लिंक ="/products"
 वर्गनाम={स्थान.पथनाम.शुरू होता है("/products")? "ब्रेडक्रंब-सक्रिय": "ब्रेडक्रंब-नहीं-सक्रिय"}
>
 उत्पादों
</Link>
<से लिंक ="/products/1"
 वर्गनाम = {स्थान.पथनाम "/products/1"? "ब्रेडक्रंब-सक्रिय": "ब्रेडक्रंब-नहीं-सक्रिय"}
>
 उत्पाद 1
</Link>
</nav>
 );
}
निर्यातगलती करना ब्रेडक्रम्ब्स;

अब, एक नई CSS फाइल बनाएं और उसे नाम दें ब्रेडक्रंब.सीएसएस. फ़ाइल में निम्नलिखित CSS नियम जोड़ें:

.ब्रेडक्रंब-सक्रिय नहीं {
 रंग: #cccccc;
}
.ब्रेडक्रंब-सक्रिय {
 रंग: #000000;
}
.ब्रेडक्रंब-तीर {
 हाशिए-बाएँ: 10px;
 मार्जिन-राइट: 10 पीएक्स;
}

अब, अपनी CSS फ़ाइल को अपने रिएक्ट घटक में आयात करें और जोड़ें ब्रेडक्रंब-तीर आपके लिए कक्षा अवयव:

आयात {लिंक, स्थान का उपयोग करें} से 'प्रतिक्रिया-राउटर-डोम'
आयात "./breadcrumbs.css";
समारोहब्रेडक्रम्ब्स() {
कॉन्स्ट स्थान = उपयोग स्थान ();
वापस करना (
<एनएवी>
<से लिंक ="/"
 वर्गनाम = {स्थान.पथनाम "/"? "ब्रेडक्रंब-सक्रिय": "ब्रेडक्रंब-नहीं-सक्रिय"}
>
 घर
</Link>
<स्पैन क्लासनाम ="ब्रेडक्रंब-तीर">&जी.टी.;</span>
<से लिंक ="/products"
 वर्गनाम={स्थान.पथनाम.शुरू होता है("/products")? "ब्रेडक्रंब-सक्रिय": "ब्रेडक्रंब-नहीं-सक्रिय"}
>
 उत्पादों
</Link>
<स्पैन क्लासनाम ="ब्रेडक्रंब-तीर">&जी.टी.;</span>
<से लिंक ="/products/1"
 वर्गनाम = {स्थान.पथनाम "/products/1"? "ब्रेडक्रंब-सक्रिय": "ब्रेडक्रंब-नहीं-सक्रिय"}
>
 उत्पाद 1
</Link>
</nav>
 );
}
निर्यातगलती करना ब्रेडक्रम्ब्स;

वहाँ हैं रिएक्ट में विभिन्न प्रकार के हुक. प्रतिक्रिया-राउटर-डोम लाइब्रेरी का उपयोग स्थान हुक आपको लोकेशन ऑब्जेक्ट तक पहुंच प्रदान करता है, जिसमें वर्तमान URL पथ के बारे में जानकारी होती है।

घटक का क्लासनाम प्रोप ब्रेडक्रंब में एक सीएसएस वर्ग जोड़ता है। क्लासनेम प्रोप एक स्ट्रिंग या स्ट्रिंग्स की एक सरणी लेता है। यदि यह एक स्ट्रिंग है, तो यह स्ट्रिंग को एकल वर्ग के रूप में तत्व में जोड़ देगा। यदि यह स्ट्रिंग्स की एक सरणी है, तो सरणी में प्रत्येक स्ट्रिंग एक अलग वर्ग के रूप में जुड़ जाएगी।

इसके साथ आरंभ होता है विधि जाँचती है कि क्या वर्तमान पथनाम "/ उत्पादों" से शुरू होता है। ऐसा इसलिए है क्योंकि उत्पाद पृष्ठ के लिए ब्रेडक्रंब न केवल तब सक्रिय होना चाहिए जब पथ "/उत्पाद" हो बल्कि तब भी जब पथ "/उत्पाद/1", "/उत्पाद/2", आदि हो।

विधि 2: उपयोग-प्रतिक्रिया-राउटर-ब्रेडक्रंब लाइब्रेरी का उपयोग करके

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

इस लाइब्रेरी का उपयोग करने के लिए, आपको पहले इसे npm का उपयोग करके इंस्टॉल करना होगा:

NPM स्थापित करनाउपयोग-रिएक्शन-राउटर-ब्रेडक्रंब

एक बार पुस्तकालय स्थापित हो जाने के बाद, आप इसे अपने रिएक्ट घटक में आयात कर सकते हैं:

आयात उपयोगब्रेडक्रम्ब्स से 'उपयोग-प्रतिक्रिया-राउटर-ब्रेडक्रंब'

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

कॉन्स्ट ब्रेडक्रंब = ब्रेडक्रंब का उपयोग करें ();
सांत्वना देनालॉग (ब्रेडक्रंब);

यह कंसोल में ब्रेडक्रंब ऑब्जेक्ट्स की एक सरणी लॉग करेगा। प्रत्येक ब्रेडक्रंब ऑब्जेक्ट में मार्ग के बारे में जानकारी होती है, जैसे नाम, पथ और पैराम।

अब, आप अपने ब्रेडक्रंब को स्क्रीन पर रेंडर कर सकते हैं। आप उपयोग कर सकते हैं अपने ब्रेडक्रंब बनाने के लिए प्रतिक्रिया-राउटर लाइब्रेरी से घटक:

आयात { जोड़ना } से 'प्रतिक्रिया-राउटर-डोम'
आयात उपयोगब्रेडक्रम्ब्स से 'उपयोग-प्रतिक्रिया-राउटर-ब्रेडक्रंब'
कॉन्स्ट मार्ग = [
 { पथ: '/users/:userId', ब्रेडक्रंब: 'उदाहरण 1' },
 { पथ: '/data', ब्रेडक्रंब: 'उदाहरण 2' }
];
समारोहब्रेडक्रम्ब्स() {
कॉन्स्ट ब्रेडक्रंब = ब्रेडक्रंब (मार्ग) का उपयोग करें;
सांत्वना देनालॉग (ब्रेडक्रंब)
वापस करना (
<एनएवी>
 {ब्रेडक्रंब.मैप (({मैच, ब्रेडक्रंब}) => (
<लिंक कुंजी={match.url} to={match.url}>
 {ब्रेडक्रंब} /
</Link>
 ))}
</nav>
 );
}
निर्यातगलती करना ब्रेडक्रम्ब्स;

लिंक घटक को प्रतिक्रिया-राउटर-डोम लाइब्रेरी से आयात किया जाता है। आप इस घटक का उपयोग एप्लिकेशन के अन्य भागों के लिंक बनाने के लिए करेंगे। आप भी कर सकते हैं संरक्षित मार्ग बनाएं लिंक घटक का उपयोग करना।

रूट ऑब्जेक्ट्स की एक सरणी बनाई जाती है। प्रत्येक रूट ऑब्जेक्ट में पथ और ब्रेडक्रंब गुण होते हैं। पथ संपत्ति URL पथ से मेल खाती है, और ब्रेडक्रंब संपत्ति ब्रेडक्रंब के नाम से मेल खाती है।

उपयोगब्रेडक्रम्ब्स ब्रेडक्रंब बनाने के लिए हुक का उपयोग किया जाता है। यह हुक एक पैरामीटर के रूप में मार्गों की एक सरणी को स्वीकार करता है। ब्रेडक्रंब उत्पन्न करने के लिए मार्गों का उपयोग किया जाता है।

ब्रेडक्रंब की सरणी पर पुनरावृति करने के लिए मानचित्र विधि का उपयोग किया जाता है। प्रत्येक ब्रेडक्रंब के लिए, a घटक बनाया जाता है। लिंक घटक में एक है को प्रोप, जो ब्रेडक्रंब के यूआरएल पथ से मेल खाता है। ब्रेडक्रंब स्वयं की सामग्री के रूप में प्रस्तुत किया जाता है अवयव।

अब आप ब्रेडक्रम्ब्स में कुछ स्टाइलिंग मिला सकते हैं। एक नई CSS फ़ाइल बनाएँ और उसे नाम दें ब्रेडक्रम्ब्स.सीएसएस. उसके बाद, फ़ाइल में निम्न CSS नियम जोड़ें:

.ब्रेडक्रंब-सक्रिय नहीं {
 रंग: #cccccc;
}
.ब्रेडक्रंब-सक्रिय {
 रंग: #000000;
}

अब, आप CSS फ़ाइल को रिएक्ट घटक में आयात कर सकते हैं और ब्रेडक्रंब कक्षाओं को इसमें जोड़ सकते हैं अवयव:

आयात {लिंक, स्थान का उपयोग करें} से 'प्रतिक्रिया-राउटर-डोम'
आयात उपयोगब्रेडक्रम्ब्स से 'उपयोग-प्रतिक्रिया-राउटर-ब्रेडक्रंब'
आयात "./ब्रेडक्रंब.सीएसएस";
कॉन्स्ट मार्ग = [
 { पथ: '/users/:userId', ब्रेडक्रंब: 'उदाहरण 1' },
 { पथ: '/data', ब्रेडक्रंब: 'उदाहरण 2' }
];
समारोहब्रेडक्रम्ब्स() {
कॉन्स्ट ब्रेडक्रंब = ब्रेडक्रंब (मार्ग) का उपयोग करें;
कॉन्स्ट स्थान = उपयोग स्थान ()
वापस करना (
<एनएवी>
 {ब्रेडक्रंब.मैप (({मैच, ब्रेडक्रंब}) => (
<जोड़ना 
 कुंजी = {मैच.यूआरएल} 
 to={match.url}
 वर्गनाम = {मैच.पथनाम स्थान.पथनाम? "ब्रेडक्रंब-सक्रिय": "ब्रेडक्रंब-नहीं-सक्रिय"}
>
 {ब्रेडक्रंब} / 
</Link>
 ))}
</nav>
 );
}
निर्यातगलती करना ब्रेडक्रम्ब्स;

ब्रेडक्रंब के साथ उपयोगकर्ता जुड़ाव बढ़ाएँ

ब्रेडक्रंब के साथ, आप न केवल उपयोगकर्ताओं को यह समझने में सहायता कर सकते हैं कि वे आपकी वेबसाइट में कहां हैं, बल्कि आप उपयोगकर्ता जुड़ाव भी बढ़ा सकते हैं। ब्रेडक्रंब का उपयोग किसी कार्य के माध्यम से उपयोगकर्ता की प्रगति दिखाने के लिए किया जा सकता है, जैसे साइन-अप प्रक्रिया या खरीदारी। उपयोगकर्ता की प्रगति दिखाकर, आप उन्हें कार्य पूरा करने के लिए प्रोत्साहित कर सकते हैं।

वेबसाइट डिज़ाइन करते समय आपको कई अन्य बातों का भी ध्यान रखना चाहिए, जैसे प्रयोज्यता, पहुंच और मोबाइल-मित्रता। हालाँकि, यदि आप इन बातों को ध्यान में रखते हैं, तो आप एक ऐसी वेबसाइट बना सकते हैं जो उपयोगकर्ता के अनुकूल और आकर्षक दोनों हो।