Galvenā problēma, kas saistīta ar statisko stilu izmantošanu ar React Router, ir tā, ka var būt grūti izsekot dažādiem maršrutiem un ar tiem saistītajiem stiliem. Izmantojot statiskos stilus, katram maršrutam ir jābūt savam CSS noteikumu kopumam, kas ātri var kļūt smagnējs un grūti uzturējams. Turklāt, ja stils tiek izmantots vairākos maršrutos, tas ir jādublē visos maršrutos, tādējādi apgrūtinot koda saglabāšanu DRY (Neatkārtojiet sevi).
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. Pirmajā rindā tiek importēta React bibliotēka.
2. Otrajā rindā tiek importēti komponenti BrowserRouter, Route un Link no react-router-dom bibliotēkas.
3. Trešā rinda importē stilizētu komponentu no stilizētu komponentu bibliotēkas.
4. Ceturtajā rindiņā tiek izveidots StyledLink komponents, izmantojot komponentu Link, kas importēts no react-router-dom, un ieveido to ar krāsu: bāli violets un font-weight: treknraksts, kā arī kursora efekts, kas maina tā krāsu uz baltu un noņem visu tekstu. dekorēšana, kad virza kursoru virs tā.
5. Piektajā rindā tiek izveidots lietotnes komponents, kas atveido maršrutētāja komponentu ar diviem maršruta komponentiem tā iekšpusē (viens — Home un otrs — Par). Tas arī atveido nesakārtotu sarakstu ar divām saitēm (Sākums un Par), izmantojot komponentu StyledLink, kas izveidots 4. rindiņā virs saitēm, kuras stilizēšanas nolūkos atdala ar hr tagu.
6. 8.–11. rindiņā tiek izveidoti divi funkcionālie komponenti ar nosaukumu Sākums un Par, kas atveido h2 tagus ar to attiecīgajiem nosaukumiem, kad tos izsauc attiecīgie maršruta komponenti 5. rindiņā virs tām abām (Sākums atveido “Mājas”, bet About – “Par”. ).
7. Visbeidzot, 12. rindiņa eksportē lietotnes komponentu, lai vajadzības gadījumā to varētu izmantot citur mūsu lietojumprogrammā
Statiskie stili
Statiskie stili React Router ir stili, kas tiek lietoti komponentam un paliek nemainīgi neatkarīgi no komponenta stāvokļa vai rekvizītu izmaiņām. Tas ir pretstatā dinamiskajiem stiliem, kas mainās atkarībā no komponenta stāvokļa vai rekvizītiem. Statiskos stilus var izmantot, lai izveidotu konsekventu izskatu un sajūtu visā lietojumprogrammā, kā arī nodrošinātu vienkāršu veidu, kā izstrādātājiem ātri izveidot stilu komponentus, tos manuāli nepielāgojot katru reizi, kad notiek izmaiņas.
stila komponentu pakete
Stilizētie komponenti ir populāra React Router pakotne, kas ļauj izstrādātājiem izveidot un pārvaldīt komponentu līmeņa stilus savās React lietojumprogrammās. Tas nodrošina vienkāršu veidu, kā rakstīt CSS kodu, kas ir ietverts vienam komponentam, atvieglojot tā uzturēšanu un atkļūdošanu. Stilizētie komponenti arī atvieglo stilu koplietošanu vairākos komponentos, kā arī nodrošina atbalstu tēmu veidošanai. Turklāt stilizētos komponentus var izmantot kopā ar React Router saites komponentu, ļaujot izstrādātājiem veidot saites savā lietojumprogrammā.
Kā lietot statiskos stilus
Statiskos stilus var izmantot React Router, izmantojot iekļauto stila atribūtu. Šis atribūts ļauj piemērot stilu tieši elementam, neizmantojot atsevišķu stilu lapu. Lai programmā React Router izmantotu statiskus stilus, jums būs jāizveido stila objekts un pēc tam tas jānodod kā arguments komponenta stila rekvizītam. Piemēram:
const myStyle = {
fona krāsa: '#f2f2f2',
fonta izmērs: '20 pikseļi',
krāsa: '#000'
};
