Nalutas: tumugon sa router gamit ang mga static na istilo

Ang pangunahing problema na nauugnay sa paggamit ng mga static na istilo sa React Router ay maaaring mahirap subaybayan ang iba't ibang ruta at ang mga nauugnay na istilo nito. Sa mga static na istilo, ang bawat ruta ay kailangang magkaroon ng sarili nitong hanay ng mga panuntunan ng CSS, na maaaring mabilis na maging mahirap gamitin at mahirap mapanatili. Bukod pa rito, kung ang isang istilo ay ginagamit sa maraming ruta, kailangan itong ma-duplicate sa lahat ng mga ito, na nagpapahirap na panatilihing DRY ang code (Huwag Ulitin ang Iyong Sarili).

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. Ini-import ng unang linya ang React library.
2. Ini-import ng pangalawang linya ang mga bahagi ng BrowserRouter, Ruta, at Link mula sa library ng react-router-dom.
3. Ini-import ng ikatlong linya ang naka-istilong bahagi mula sa library na may istilong bahagi.
4. Ang ika-apat na linya ay lumilikha ng isang StyledLink component gamit ang Link component na na-import mula sa react-router-dom at ini-istilo ito ng kulay: palevioletred at font-weight: bold, pati na rin ang isang hover effect na nagpapalit ng kulay nito sa puti at nag-aalis ng anumang text palamuti kapag naka-hover sa ibabaw.
5. Lumilikha ang ikalimang linya ng bahagi ng App na nagre-render ng component ng Router na may dalawang bahagi ng Ruta sa loob nito (isa para sa Home at isa para sa About). Nag-render din ito ng hindi nakaayos na listahan ng dalawang link (Home at About) gamit ang StyledLink na bahagi na ginawa sa Linya 4 sa itaas ng mga ito na parehong pinaghihiwalay ng isang hr tag para sa mga layunin ng pag-istilo.
6. Ang mga linya 8 – 11 ay lumikha ng dalawang functional na bahagi na tinatawag na Home at Tungkol sa na nagre-render ng mga h2 tag na may kani-kanilang mga pangalan sa loob ng mga ito kapag tinawag ng kani-kanilang mga bahagi ng Ruta sa Linya 5 sa itaas nilang dalawa (Ang Home ay nag-render ng "Home" habang ang About ay nag-render ng "About" ).
7. Panghuli, ini-export ng Line 12 ang bahagi ng App para magamit ito sa ibang lugar sa aming application kung kinakailangan

Mga Static na Estilo

Ang mga static na istilo sa React Router ay mga istilong inilalapat sa isang bahagi at nananatiling pareho anuman ang anumang pagbabago sa estado o props ng bahagi. Kabaligtaran ito sa mga dynamic na istilo, na nagbabago depende sa estado o props ng isang bahagi. Maaaring gamitin ang mga static na istilo upang lumikha ng pare-parehong hitsura at pakiramdam sa isang application, pati na rin magbigay ng madaling paraan para sa mga developer na mabilis na mag-istilo ng mga bahagi nang hindi kinakailangang manu-manong ayusin ang mga ito sa tuwing may pagbabago.

naka-istilong bahagi na pakete

Ang mga naka-istilong sangkap ay isang sikat na pakete para sa React Router na nagbibigay-daan sa mga developer na gumawa at mamahala ng mga istilo sa antas ng bahagi sa kanilang mga application ng React. Nagbibigay ito ng madaling paraan upang magsulat ng CSS code na saklaw sa isang bahagi, na ginagawang mas madali ang pagpapanatili at pag-debug. Pinapadali din ng mga naka-istilong bahagi ang pagbabahagi ng mga istilo sa maraming bahagi, pati na rin ang pagbibigay ng suporta para sa tema. Bukod pa rito, maaaring gamitin ang mga naka-istilong bahagi sa bahagi ng Link ng React Router, na nagpapahintulot sa mga developer na mag-istilo ng mga link sa loob ng kanilang aplikasyon.

Paano gamitin ang Static Styles

Maaaring gamitin ang mga static na istilo sa React Router sa pamamagitan ng paggamit ng attribute na inline na istilo. Nagbibigay-daan sa iyo ang attribute na ito na direktang maglapat ng istilo sa isang elemento nang hindi nangangailangan ng hiwalay na stylesheet. Upang gumamit ng mga static na istilo sa React Router, kakailanganin mong gumawa ng style object at pagkatapos ay ipasa ito bilang argumento sa style prop ng component. Halimbawa:

const myStyle = {
Kulay ng background: '#f2f2f2′,
laki ng font: '20px',
kulay: '#000'
};