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

सामग्री UI आइकन वाले लिंक के साथ रिएक्ट साइड नेविगेशन मेनू बनाने के लिए इन चरणों का पालन करें। जब आप उन पर क्लिक करेंगे तो लिंक विभिन्न पृष्ठों को प्रस्तुत करेंगे।

एक प्रतिक्रिया आवेदन बनाना

यदि आपके पास पहले से ही प्रतिक्रिया परियोजना, अगले चरण पर जाने के लिए स्वतंत्र महसूस करें।

आप प्रतिक्रिया के साथ जल्दी से उठने और चलने के लिए create-react-app कमांड का उपयोग कर सकते हैं। यह आपके लिए सभी निर्भरताओं और कॉन्फ़िगरेशन को स्थापित करता है।

React-sidenav नामक रिएक्ट प्रोजेक्ट बनाने के लिए निम्न कमांड चलाएँ।

एनपीएक्स सृजन करना-रिएक्ट-ऐप

यह आपको आरंभ करने के लिए कुछ फ़ाइलों के साथ एक प्रतिक्रिया-सिडनेव फ़ोल्डर बनाएगा। इस फ़ोल्डर को थोड़ा साफ करने के लिए, src फ़ोल्डर में नेविगेट करें और App.js की सामग्री को इसके साथ बदलें:

आयात './App.css';
समारोहअनुप्रयोग() {
वापसी (
<div वर्गनाम="अनुप्रयोग"></div>
 );
}
निर्यात करनाचूक अनुप्रयोग;

नेविगेशन घटक बनाना

आपके द्वारा बनाया गया नेविगेशन घटक इस तरह दिखेगा:

instagram viewer

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

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

प्रदर्शित करने के लिए, lib नामक एक नया फ़ोल्डर बनाएं और navData.js नामक एक नई फ़ाइल जोड़ें।

आयात होमआइकन से '@ मुई/आइकन-सामग्री/होम';
आयात ट्रैवलएक्सप्लोरआइकन से '@ मुई/आइकन-सामग्री/ट्रैवलएक्सप्लोर';
आयात बार चार्ट चिह्न से '@ मुई/आइकन-सामग्री/बार चार्ट';
आयात सेटिंग्सआइकन से '@ मुई/आइकन-सामग्री/सेटिंग्स';
निर्यात करनास्थिरांक नवडेटा = [
 {
 आईडी: 0,
 चिह्न: <होमआइकन/>,
 मूलपाठ: "घर",
 संपर्क: "/"
 },
 {
 आईडी: 1,
 चिह्न: <ट्रैवलएक्सप्लोरआइकन/>,
 मूलपाठ: "अन्वेषण करना",
 संपर्क: "अन्वेषण करना"
 },
 {
 आईडी: 2,
 चिह्न: <बार चार्ट चिह्न/>,
 मूलपाठ: "आंकड़े",
 संपर्क: "आंकड़े"
 },
 {
 आईडी: 3,
 चिह्न: <सेटिंग्सआइकन/>,
 मूलपाठ: "समायोजन",
 संपर्क: "समायोजन"
 }
]

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

एनपीएम इंस्टॉल @मुई/material @भावना/react @भावना/styled
एनपीएम इंस्टॉल @मुई/icons-material

इसके बाद, नाम का एक फोल्डर बनाएं अवयव और नामक एक नया घटक जोड़ें सिडेनव.जेएस.

इस फ़ाइल में, ../lib से navData आयात करें और इसके लिए कंकाल बनाएं सिडेनव समारोह:

// Sidenav.js. में
आयात {नेवडाटा} से "../lib/navData";
निर्यात करनाचूकसमारोहसिडेनव() {
वापसी (
<डिव>
</div>
 )
}

लिंक बनाने के लिए, इस घटक में div तत्व को इसमें संशोधित करें:

<डिव>
<बटन वर्गनाम={styles.menuBtn}>
<कीबोर्डडबलएरोबाएंआइकन />
</button>
 {navData.map (आइटम =>{
 वापसी <div key={item.id} className={styles.sideitem}>
 {आइटम.आइकन}
<स्पैन क्लासनाम = {styles.linkText}>{आइटम.पाठ}</span>
</div>
 })}
</div>

यह घटक मानचित्र फ़ंक्शन में प्रत्येक पुनरावृत्ति के लिए आइकन और लिंक टेक्स्ट युक्त एक नेविगेशन लिंक बनाता है।

बटन तत्व सामग्री UI लाइब्रेरी से बायां तीर आइकन रखता है। इस कोड का उपयोग करके इसे घटक के शीर्ष पर आयात करें।

आयात कीबोर्डडबलएरो लेफ्टआइकॉन से '@ mui/आइकन-सामग्री/कीबोर्डडबलएरो लेफ्ट';

आपने यह भी देखा होगा कि वर्ग के नाम एक शैली वस्तु का संदर्भ देते हैं। ऐसा इसलिए है क्योंकि यह ट्यूटोरियल CSS मॉड्यूल का उपयोग करता है। CSS मॉड्यूल आपको रिएक्ट में स्थानीय रूप से स्कोप्ड स्टाइल बनाने की अनुमति देता है. यदि आपने इस प्रोजेक्ट को शुरू करने के लिए create-react-app का उपयोग किया है तो आपको कुछ भी इंस्टॉल या कॉन्फ़िगर करने की आवश्यकता नहीं है।

घटक फ़ोल्डर में, नामक एक नई फ़ाइल बनाएँ sidenav.module.css और निम्नलिखित जोड़ें:

साइडनाव {
 चौड़ाई: 250 पीएक्स;
संक्रमण: चौड़ाई 0.3sआराम से बाहर;
 ऊंचाई: 100 वीएच;
 पृष्ठभूमि-रंग: आरजीबी (10,25,41);
 पैडिंग-टॉप: 28px;
}
.sidenavबंद {
 रचना करता है: सिडेनव;
संक्रमण: चौड़ाई 0.3sआराम से बाहर;
 चौड़ाई: 60px
}


.sideitem {
 प्रदर्शन: फ्लेक्स;
 संरेखित-आइटम: केंद्र;
 पैडिंग: 10px 20px;
 कर्सर: सूचक;
 रंग: #B2BAC2;
 पाठ-सजावट: कोई नहीं;
}


।लिंक पाठ {
 पैडिंग-बाएं: 16px;
}


.linkTextClosed {
 रचना करता है: लिंकटेक्स्ट;
 दृश्यता: छिपा हुआ;
}


.sideitem:होवर {
 पीछे का रंग: #244f7d1c;
}
.मेनूबीटीएन {
 संरेखित करें-खुद: केंद्र;
 संरेखित करें-स्व: फ्लेक्स-प्रारंभ; 
 औचित्य-स्व: फ्लेक्स-समाप्त;
 रंग: #B2BAC2;
 पृष्ठभूमि-रंग: पारदर्शी;
 सीमा: कोई नहीं;
 कर्सर: सूचक;
 पैडिंग-बाएं: 20px;
}

रिएक्ट राउटर सेट करना

मानचित्र फ़ंक्शन द्वारा लौटाए गए div तत्व लिंक होने चाहिए। रिएक्ट में, आप रिएक्ट-राउटर-डोम का उपयोग करके लिंक और रूट बना सकते हैं।

टर्मिनल में, npm के माध्यम से प्रतिक्रिया-राउटर-डोम स्थापित करें।

npm प्रतिक्रिया-राउटर-डोम स्थापित करें@नवीनतम

यह आदेश प्रतिक्रिया-राउटर-डोम का नवीनतम संस्करण स्थापित करता है।

Index.js में, ऐप कंपोनेंट को राउटर से लपेटें।

आयात प्रतिक्रिया से 'प्रतिक्रिया';
आयात रिएक्टडोम से 'रिएक्शन-डोम/क्लाइंट';
आयात अनुप्रयोग से '।/अनुप्रयोग';
आयात { ब्राउजर राउटर } से 'प्रतिक्रिया-राउटर-डोम';
स्थिरांक रूट = ReactDOM.createRoot (दस्तावेज़.getElementById ('रूट'));
जड़।प्रदान करना(
<प्रतिक्रिया। सख्त मोड>
<ब्राउज़र राउटर>
<अनुप्रयोग />
</BrowserRouter>
</React.StrictMode>
);

इसके बाद, App.js में, अपने मार्ग जोड़ें।

आयात {
 ब्राउज़र राउटर,
 मार्ग,
 रास्ता,
} से "प्रतिक्रिया-राउटर-डोम";
आयात './App.css';
आयात सिडेनव से './घटक/सिडेनव';
आयात अन्वेषण करना से "./पेज/एक्सप्लोर";
आयात घर से "./पेज/होम";
आयात समायोजन से "./पेज/सेटिंग्स";
आयात आंकड़े से "./पेज/सांख्यिकी";
समारोहअनुप्रयोग() {
वापसी (
<div वर्गनाम="अनुप्रयोग">
<सिडेनव/>
<मुख्य>
<मार्गों>
<मार्ग पथ ="/" तत्व = {<घर />}/>
<मार्ग पथ ="/explore" तत्व = {<अन्वेषण करना />} />
<मार्ग पथ ="/statistics" तत्व = {<सांख्यिकी />}/>
<मार्ग पथ ="/settings" तत्व = {<समायोजन />} />
</Routes>
</main>
</div>
 );
}
निर्यात करनाचूक अनुप्रयोग;

इन शैलियों के साथ App.css को संशोधित करें।

तन {
 मार्जिन: 0;
 पैडिंग: 0;
}
।अनुप्रयोग {
 प्रदर्शन: फ्लेक्स;
}
मुख्य {
 पैडिंग: 10px;
}

प्रत्येक मार्ग को दिए गए URL के आधार पर एक अलग पृष्ठ लौटाता है पथ सहारा. पेज नामक एक नया फ़ोल्डर बनाएं और चार घटक जोड़ें - होम, एक्सप्लोर, सांख्यिकी और सेटिंग्स पेज। यहाँ एक उदाहरण है:

निर्यात करनाचूकसमारोहघर() {
वापसी (
<डिव>घर</div>
 )
}

यदि आप /होम पथ पर जाते हैं, तो आपको "होम" देखना चाहिए।

जब आप उन पर क्लिक करते हैं तो साइडबार के लिंक मेल खाने वाले पेज पर ले जाने चाहिए। Sidenav.js में, div तत्व के बजाय प्रतिक्रिया-राउटर-डोम से NavLink घटक का उपयोग करने के लिए मानचित्र फ़ंक्शन को संशोधित करें।

{navData.map (आइटम => {
 वापसी <NavLink key={item.id} className={styles.sideitem} to={item.link}>
 {आइटम.आइकन}
<स्पैन क्लासनाम = {styles.linkText}>{आइटम.पाठ}</span>
</NavLink>
})}

फ़ाइल के शीर्ष पर NavLink आयात करना याद रखें।

आयात {नवलिंक} से "प्रतिक्रिया-राउटर-डोम";

NavLink को प्रोप के माध्यम से लिंक के लिए URL पथ प्राप्त होता है।

इस बिंदु तक, नेविगेशन बार खुला है। इसे छोटा करने योग्य बनाने के लिए, जब कोई उपयोगकर्ता तीर बटन पर क्लिक करता है, तो आप CSS वर्ग को बदलकर इसकी चौड़ाई को टॉगल कर सकते हैं। फिर आप इसे खोलने के लिए CSS क्लास को फिर से बदल सकते हैं।

इस टॉगल कार्यक्षमता को प्राप्त करने के लिए, आपको यह जानना होगा कि साइडबार कब खुला और बंद है।

इसके लिए यूजस्टेट हुक का इस्तेमाल करें। इस प्रतिक्रिया हुक आपको एक कार्यात्मक घटक में राज्य को जोड़ने और ट्रैक करने की अनुमति देता है।

sideNav.js में, ओपन स्टेट के लिए हुक बनाएं।

स्थिरांक [खुला, सेटोपेन] = यूज़स्टेट (सच)

ओपन स्टेट को ट्रू में इनिशियलाइज़ करें, इसलिए जब आप एप्लिकेशन शुरू करेंगे तो साइडबार हमेशा खुला रहेगा।

इसके बाद, वह फ़ंक्शन बनाएं जो इस स्थिति को चालू करेगा।

स्थिरांक टॉगल ओपन = () => {
 सेटोपेन (! खुला)
}

अब आप इस तरह से डायनामिक CSS क्लासेस बनाने के लिए ओपन वैल्यू का उपयोग कर सकते हैं:

<डिव क्लासनाम = {खुला? Styles.sidenav: Style.sidenavClosed}>
<बटन क्लासनाम={styles.menuBtn} onClick={toggleOpen}>
 {खोलना? <कीबोर्डडबलएरोबाएंआइकन />: <कीबोर्डडबलएरोराइटआइकन />}
</button>
 {navData.map (आइटम =>{
 वापसी <NavLink key={item.id} className={styles.sideitem} to={item.link}>
 {आइटम.आइकन}
<स्पैन क्लासनाम = {खुला? Styles.linkText: Styles.linkTextClosed}>{आइटम.पाठ}</span>
</NavLink>
 })}
</div>

उपयोग किए गए CSS वर्ग के नाम खुले राज्य द्वारा निर्धारित किए जाएंगे। उदाहरण के लिए, यदि खुला सत्य है, तो बाहरी डिव तत्व का एक सिडेनव वर्ग का नाम होगा। अन्यथा, वर्ग sidenavClosed हो जाएगा।

यह आइकन के लिए समान है, जो साइडबार को बंद करने पर दायां तीर आइकन में बदल जाता है।

इसे आयात करना याद रखें।

आयात कीबोर्डडबलएरोराइटआइकन से '@ मुई/आइकन-सामग्री/कीबोर्डडबलएरोराइट';

साइडबार घटक अब बंधनेवाला है।

इसमें से पूरा कोड लें गिटहब भंडार और इसे स्वयं आजमाएं।

स्टाइलिंग रिएक्ट कंपोनेंट्स

रिएक्ट एक बंधनेवाला नेविगेशन घटक बनाने के लिए आसान बनाता है। आप कुछ ऐसे टूल का उपयोग कर सकते हैं जो रिएक्ट प्रदान करता है जैसे कि रूटिंग को संभालने के लिए रिएक्ट-राउटर-डोम और ढह गई स्थिति का ट्रैक रखने के लिए हुक।

आप घटकों को स्टाइल करने के लिए सीएसएस मॉड्यूल का भी उपयोग कर सकते हैं, हालांकि आपको ऐसा करने की आवश्यकता नहीं है। स्थानीय रूप से स्कोप वाली कक्षाएं बनाने के लिए उनका उपयोग करें जो अद्वितीय हैं और यदि आप उपयोग में नहीं हैं तो आप बंडल फ़ाइलों से हिल सकते हैं।