निराकरण: स्थिर शैली वापरून राउटर प्रतिक्रिया

रिएक्ट राउटरसह स्थिर शैली वापरण्याशी संबंधित मुख्य समस्या ही आहे की भिन्न मार्ग आणि त्यांच्याशी संबंधित शैलींचा मागोवा ठेवणे कठीण होऊ शकते. स्थिर शैलींसह, प्रत्येक मार्गाला CSS नियमांचा स्वतःचा संच असणे आवश्यक आहे, जे त्वरीत अनियंत्रित आणि देखरेख करणे कठीण होऊ शकते. याव्यतिरिक्त, जर एखादी शैली एकाधिक मार्गांमध्ये वापरली गेली असेल, तर ती त्या सर्वांमध्ये डुप्लिकेट करणे आवश्यक आहे, ज्यामुळे कोड 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. दुसरी ओळ react-router-dom लायब्ररीमधून BrowserRouter, Route आणि Link घटक आयात करते.
3. तिसरी ओळ स्टाइल केलेले घटक स्टाईल-घटक लायब्ररीमधून आयात करते.
4. चौथी ओळ react-router-dom वरून आयात केलेल्या Link घटकाचा वापर करून एक StyledLink घटक तयार करते आणि त्याला रंग: palevioletred आणि font-weight: ठळक, तसेच एक होवर प्रभाव जो त्याचा रंग पांढरा बदलतो आणि कोणताही मजकूर काढून टाकतो. वर फिरवल्यावर सजावट.
5. पाचवी ओळ एक अॅप घटक तयार करते जे राउटर घटक रेंडर करते ज्यामध्ये दोन रूट घटक असतात (एक घरासाठी आणि एक बद्दलसाठी). हे स्टाइलिंग हेतूंसाठी hr टॅगद्वारे विभक्त केलेल्या वरील ओळ 4 मध्ये तयार केलेल्या StyledLink घटकाचा वापर करून दोन लिंक्सची (होम आणि बद्दल) अक्रमित सूची देखील प्रस्तुत करते.
6. लाईन्स 8 – 11 होम नावाचे दोन फंक्शनल घटक तयार करतात आणि त्या वरील ओळी 2 मधील त्यांच्या संबंधित रूट घटकांद्वारे कॉल केल्यावर त्यांच्या आत h5 टॅग रेंडर करतात आणि त्यामध्ये त्यांच्या संबंधित नावांसह (होम "होम" रेंडर करते तर "बद्दल" रेंडर करते. ).
7. शेवटी, ओळ 12 अॅप घटक निर्यात करते जेणेकरून आवश्यक असल्यास ते आमच्या अनुप्रयोगात इतरत्र वापरले जाऊ शकते

स्थिर शैली

रिएक्ट राउटर मधील स्टॅटिक स्टाइल्स अशा शैली आहेत ज्या घटकावर लागू केल्या जातात आणि घटकाच्या स्थितीत किंवा प्रॉप्समध्ये कोणतेही बदल न करता समान राहतात. हे डायनॅमिक शैलींच्या विरुद्ध आहे, जे घटकाच्या स्थितीनुसार किंवा प्रॉप्सवर अवलंबून बदलतात. अॅप्लिकेशनमध्ये एक सुसंगत स्वरूप आणि अनुभव तयार करण्यासाठी स्टॅटिक शैली वापरल्या जाऊ शकतात, तसेच विकासकांना प्रत्येक वेळी बदल होताना व्यक्तिचलितपणे समायोजित न करता घटक द्रुतपणे शैलीबद्ध करण्याचा एक सोपा मार्ग प्रदान केला जाऊ शकतो.

शैलीबद्ध-घटक पॅकेज

स्टाइल केलेले-घटक हे रिअॅक्ट राउटरसाठी लोकप्रिय पॅकेज आहे जे विकासकांना त्यांच्या प्रतिक्रिया अनुप्रयोगांमध्ये घटक-स्तरीय शैली तयार आणि व्यवस्थापित करण्यास अनुमती देते. हे एका घटकासाठी व्यापलेले CSS कोड लिहिण्याचा एक सोपा मार्ग प्रदान करते, ज्यामुळे देखभाल करणे आणि डीबग करणे सोपे होते. शैलीबद्ध-घटक अनेक घटकांमध्ये शैली सामायिक करणे तसेच थीमिंगसाठी समर्थन प्रदान करणे देखील सोपे करते. याव्यतिरिक्त, स्टाइल केलेले-घटक रिअॅक्ट राउटरच्या लिंक घटकासह वापरले जाऊ शकतात, ज्यामुळे विकसकांना त्यांच्या ऍप्लिकेशनमधील लिंक्स स्टाईल करता येतात.

स्थिर शैली कशी वापरायची

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

const myStyle = {
पार्श्वभूमी रंग: '#f2f2f2',
फॉन्ट आकार: '20px',
रंग: '#000'
};