Principala problemă legată de utilizarea stilurilor statice cu React Router este că poate fi dificil să urmăriți diferitele rute și stilurile asociate acestora. Cu stilurile statice, fiecare rută trebuie să aibă propriul set de reguli CSS, care pot deveni rapid greoi și greu de întreținut. În plus, dacă un stil este utilizat în mai multe rute, acesta trebuie să fie duplicat pe toate, ceea ce face dificilă păstrarea codului DRY (nu te repeta).
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. Prima linie importă biblioteca React.
2. A doua linie importă componentele BrowserRouter, Route și Link din biblioteca react-router-dom.
3. A treia linie importă componenta cu stil din biblioteca de componente cu stil.
4. A patra linie creează o componentă StyledLink folosind componenta Link importată din react-router-dom și o stilează cu culoare: palevioletred și font-weight: bold, precum și un efect de hover care își schimbă culoarea în alb și elimină orice text decor atunci când plutește deasupra.
5. A cincea linie creează o componentă App care redă o componentă Router cu două componente Route în interior (una pentru Acasă și alta pentru Despre). De asemenea, redă o listă neordonată de două link-uri (Acasă și Despre) folosind componenta StyledLink creată în linia 4 deasupra lor, ambele separate printr-o etichetă hr în scopuri de stil.
6. Liniile 8 – 11 creează două componente funcționale numite Acasă și Despre care redă etichetele h2 cu numele lor respective în interior atunci când sunt apelate de componentele lor de traseu din linia 5 deasupra ambelor (Acasă redă „Acasă” în timp ce Despre redă „Despre” ).
7. În cele din urmă, Linia 12 exportă componenta aplicației, astfel încât să poată fi utilizată în altă parte în aplicația noastră, dacă este necesar
Stiluri statice
Stilurile statice din React Router sunt stiluri care sunt aplicate unei componente și rămân aceleași, indiferent de orice modificări aduse stării sau elementelor de recuzită ale componentei. Acest lucru este în contrast cu stilurile dinamice, care se schimbă în funcție de starea sau recuzita unei componente. Stilurile statice pot fi folosite pentru a crea un aspect coerent într-o aplicație, precum și pentru a oferi dezvoltatorilor o modalitate ușoară de a stila rapid componentele, fără a fi nevoie să le ajusteze manual de fiecare dată când există o schimbare.
pachet de componente stilate
Styled-components este un pachet popular pentru React Router care permite dezvoltatorilor să creeze și să gestioneze stiluri la nivel de componentă în aplicațiile lor React. Oferă o modalitate ușoară de a scrie cod CSS care este limitat la o singură componentă, făcându-l mai ușor de întreținut și de depanat. Componentele cu stil facilitează, de asemenea, partajarea stilurilor între mai multe componente, precum și suport pentru tematică. În plus, componentele cu stil pot fi utilizate cu componenta Link a React Router, permițând dezvoltatorilor să stilizeze linkurile în cadrul aplicației lor.
Cum se utilizează stilurile statice
Stilurile statice pot fi utilizate în React Router utilizând atributul de stil inline. Acest atribut vă permite să aplicați un stil direct unui element fără a fi nevoie de o foaie de stil separată. Pentru a utiliza stiluri statice în React Router, va trebui să creați un obiect de stil și apoi să îl transmiteți ca argument la prop de stil a componentei. De exemplu:
const myStyle = {
Culoare de fundal: „#f2f2f2”,
Dimensiune font: '20px',
culoare: „#000”
};
