ઉકેલાયેલ: સ્થિર શૈલીઓનો ઉપયોગ કરીને રાઉટરને પ્રતિક્રિયા આપો

રીએક્ટ રાઉટર સાથે સ્ટેટિક સ્ટાઇલનો ઉપયોગ કરવા સંબંધિત મુખ્ય સમસ્યા એ છે કે વિવિધ રૂટ્સ અને તેમની સાથે સંકળાયેલી શૈલીઓનો ટ્રૅક રાખવો મુશ્કેલ બની શકે છે. સ્થિર શૈલીઓ સાથે, દરેક રૂટને CSS નિયમોનો પોતાનો સેટ હોવો જરૂરી છે, જે ઝડપથી અણઘડ અને જાળવવા મુશ્કેલ બની શકે છે. વધુમાં, જો એક સ્ટાઈલનો ઉપયોગ બહુવિધ રૂટમાં કરવામાં આવે છે, તો તેને તે બધામાં ડુપ્લિકેટ કરવાની જરૂર છે, જેનાથી કોડ ડ્રાય (ડોન્ટ રિપીટ યોરસેલ્ફ) રાખવાનું મુશ્કેલ બને છે.

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 માં તેમના સંબંધિત રૂટ ઘટકો દ્વારા બોલાવવામાં આવે ત્યારે તેમની અંદર તેમના સંબંધિત નામો સાથે h5 ટૅગ્સ રેન્ડર કરે છે (હોમ રેન્ડર કરે છે "હોમ" જ્યારે રેન્ડર "વિશે" ).
7. અંતે, લાઇન 12 એપ ઘટકની નિકાસ કરે છે જેથી જો જરૂર હોય તો અમારી એપ્લિકેશનમાં અન્યત્ર તેનો ઉપયોગ કરી શકાય.

સ્થિર શૈલીઓ

રિએક્ટ રાઉટરમાં સ્થિર શૈલીઓ એવી શૈલીઓ છે જે ઘટક પર લાગુ થાય છે અને ઘટકની સ્થિતિ અથવા પ્રોપ્સમાં કોઈપણ ફેરફારોને ધ્યાનમાં લીધા વિના સમાન રહે છે. આ ગતિશીલ શૈલીઓથી વિપરીત છે, જે ઘટકની સ્થિતિ અથવા પ્રોપ્સના આધારે બદલાય છે. સ્થિર શૈલીઓનો ઉપયોગ સમગ્ર એપ્લીકેશનમાં સુસંગત દેખાવ અને અનુભૂતિ બનાવવા માટે કરી શકાય છે, તેમજ વિકાસકર્તાઓને દરેક વખતે ફેરફાર થાય ત્યારે મેન્યુઅલી સમાયોજિત કર્યા વિના ઘટકોને ઝડપથી સ્ટાઇલ કરવાની સરળ રીત પ્રદાન કરે છે.

શૈલીયુક્ત ઘટકોનું પેકેજ

સ્ટાઇલ્ડ-કોમ્પોનન્ટ્સ એ રિએક્ટ રાઉટર માટેનું એક લોકપ્રિય પેકેજ છે જે વિકાસકર્તાઓને તેમની પ્રતિક્રિયા એપ્લિકેશનમાં ઘટક-સ્તરની શૈલીઓ બનાવવા અને સંચાલિત કરવાની મંજૂરી આપે છે. તે CSS કોડ લખવાની એક સરળ રીત પ્રદાન કરે છે જે એક જ ઘટક સુધીનો છે, જે તેને જાળવી રાખવા અને ડીબગ કરવાનું સરળ બનાવે છે. સ્ટાઇલ્ડ-કમ્પોનન્ટ્સ બહુવિધ ઘટકોમાં શૈલીઓ શેર કરવાનું સરળ બનાવે છે, તેમજ થીમિંગ માટે સમર્થન પૂરું પાડે છે. વધુમાં, રિએક્ટ રાઉટરના લિંક ઘટક સાથે સ્ટાઇલ-કમ્પોનન્ટનો ઉપયોગ કરી શકાય છે, જે વિકાસકર્તાઓને તેમની એપ્લિકેશનમાં લિંક્સને સ્ટાઇલ કરવાની મંજૂરી આપે છે.

સ્ટેટિક સ્ટાઇલનો ઉપયોગ કેવી રીતે કરવો

ઇનલાઇન સ્ટાઇલ એટ્રિબ્યુટનો ઉપયોગ કરીને રિએક્ટ રાઉટરમાં સ્ટેટિક સ્ટાઇલનો ઉપયોગ કરી શકાય છે. આ એટ્રિબ્યુટ તમને અલગ સ્ટાઇલશીટની જરૂર વગર સીધા જ એલિમેન્ટ પર સ્ટાઇલ લાગુ કરવાની મંજૂરી આપે છે. રિએક્ટ રાઉટરમાં સ્ટેટિક સ્ટાઈલનો ઉપયોગ કરવા માટે, તમારે સ્ટાઈલ ઓબ્જેક્ટ બનાવવાની જરૂર પડશે અને પછી તેને કમ્પોનન્ટના સ્ટાઈલ પ્રોપમાં દલીલ તરીકે પાસ કરવી પડશે. દાખ્લા તરીકે:

const myStyle = {
પૃષ્ઠભૂમિ રંગ: '#f2f2f2',
ફોન્ટસાઇઝ: '20px',
રંગ: '#000'
};