ಪರಿಹರಿಸಲಾಗಿದೆ: ಸ್ಥಿರ ಶೈಲಿಗಳನ್ನು ಬಳಸಿಕೊಂಡು ರಿಯಾಕ್ಟ್ ರೂಟರ್

ರಿಯಾಕ್ಟ್ ರೂಟರ್‌ನೊಂದಿಗೆ ಸ್ಥಿರ ಶೈಲಿಗಳನ್ನು ಬಳಸುವುದಕ್ಕೆ ಸಂಬಂಧಿಸಿದ ಮುಖ್ಯ ಸಮಸ್ಯೆಯೆಂದರೆ ವಿಭಿನ್ನ ಮಾರ್ಗಗಳು ಮತ್ತು ಅವುಗಳ ಸಂಬಂಧಿತ ಶೈಲಿಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುವುದು ಕಷ್ಟಕರವಾಗಿರುತ್ತದೆ. ಸ್ಥಿರ ಶೈಲಿಗಳೊಂದಿಗೆ, ಪ್ರತಿಯೊಂದು ಮಾರ್ಗವು ತನ್ನದೇ ಆದ 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'
};