हल: स्थैतिक शैलियों का उपयोग करके राउटर पर प्रतिक्रिया करें

रिएक्ट राउटर के साथ स्थिर शैलियों का उपयोग करने से जुड़ी मुख्य समस्या यह है कि विभिन्न मार्गों और उनसे जुड़ी शैलियों पर नज़र रखना मुश्किल हो सकता है। स्थैतिक शैलियों के साथ, प्रत्येक मार्ग को सीएसएस नियमों का अपना सेट होना चाहिए, जो जल्दी से बोझिल और बनाए रखने में कठिन हो सकता है। इसके अतिरिक्त, यदि एक शैली का उपयोग कई मार्गों में किया जाता है, तो इसे उन सभी में डुप्लिकेट करने की आवश्यकता होती है, जिससे कोड DRY (डोंट रिपीट योरसेल्फ) को रखना मुश्किल हो जाता है।

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import styled from 'styled-components';
 
const StyledLink = styled(Link)`
  color: palevioletred;
  font-weight: bold;

  &:hover {
    color: white;
    text-decoration: none;  
  }  
`;

 const App = () => (   <Router>     <div>       <ul>         <li><StyledLink to="/">Home</StyledLink></li>         <li><StyledLink to="/about">About</StyledLink></li>       </ul>       <hr />       <Route exact path="/" component={Home} />       <Route path="/about" component={About} />     </div>   </Router>) ;

 const Home = () => (   <div>     <h2>Home</h2>   </div>) ;

 const About = () => (   <div>     <h2>About</h2>   </div>) ;

 export default App;

1. पहली पंक्ति रिएक्ट लाइब्रेरी का आयात करती है।
2. दूसरी पंक्ति प्रतिक्रिया-राउटर-डोम लाइब्रेरी से ब्राउज़र राउटर, रूट और लिंक घटकों को आयात करती है।
3. तीसरी पंक्ति स्टाइल घटक को स्टाइल-घटक लाइब्रेरी से आयात करती है।
4. चौथी पंक्ति प्रतिक्रिया-राउटर-डोम से आयातित लिंक घटक का उपयोग करके एक स्टाइललिंक घटक बनाती है और इसे रंग के साथ स्टाइल करती है: पीला और फ़ॉन्ट-वजन: बोल्ड, साथ ही एक हॉवर प्रभाव जो इसके रंग को सफेद में बदलता है और किसी भी पाठ को हटा देता है सजावट जब मँडरा।
5. पांचवीं पंक्ति एक ऐप घटक बनाती है जो राउटर घटक को इसके अंदर दो रूट घटकों के साथ प्रस्तुत करती है (एक घर के लिए और एक के बारे में)। यह ऊपर की पंक्ति 4 में बनाए गए StyledLink घटक का उपयोग करके दो लिंक (होम और अबाउट) की एक अनियंत्रित सूची भी प्रस्तुत करता है, दोनों को स्टाइलिंग उद्देश्यों के लिए hr टैग द्वारा अलग किया गया है।
6. लाइनें 8 - 11 दो कार्यात्मक घटक बनाती हैं जिन्हें होम कहा जाता है और इसके बारे में उनके अंदर उनके संबंधित नामों के साथ एच 2 टैग प्रस्तुत करते हैं जब उनके ऊपर लाइन 5 में उनके संबंधित रूट घटकों द्वारा बुलाया जाता है (होम "होम" प्रस्तुत करता है जबकि "के बारे में" प्रस्तुत करता है ).
7. अंत में, लाइन 12 ऐप घटक को निर्यात करता है ताकि जरूरत पड़ने पर इसे हमारे एप्लिकेशन में कहीं और इस्तेमाल किया जा सके

स्थैतिक शैलियाँ

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

स्टाइल-घटक पैकेज

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

स्टेटिक स्टाइल्स का उपयोग कैसे करें

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

कॉन्स्ट माय स्टाइल = {
पृष्ठभूमि का रंग: '#f2f2f2',
फ़ॉन्ट आकार: '20 पीएक्स',
रंग: '#000'
};