Rešeno: reagirajte na usmerjevalnik z uporabo statičnih slogov

Glavna težava, povezana z uporabo statičnih slogov z React Routerjem, je, da je lahko težko slediti različnim poti in njihovim povezanim slogom. Pri statičnih slogih mora imeti vsaka pot svoj niz pravil CSS, ki lahko hitro postanejo okorni in jih je težko vzdrževati. Poleg tega, če se slog uporablja na več poteh, ga je treba podvojiti na vseh, zaradi česar je težko ohraniti kodo SUHO (ne ponavljaj se).

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. Prva vrstica uvozi knjižnico React.
2. Druga vrstica uvozi komponente BrowserRouter, Route in Link iz knjižnice react-router-dom.
3. Tretja vrstica uvozi stilizirano komponento iz knjižnice stiliziranih komponent.
4. Četrta vrstica ustvari komponento StyledLink s komponento povezave, uvoženo iz react-router-dom, in jo oblikuje z barvo: palevioletred in font-weight: krepko ter z učinkom lebdenja, ki spremeni njeno barvo v belo in odstrani kakršno koli besedilo okras, ko lebdi nad njim.
5. Peta vrstica ustvari komponento aplikacije, ki upodablja komponento usmerjevalnika z dvema komponentama poti znotraj nje (ena za dom in ena za o). Prav tako upodablja neurejen seznam dveh povezav (Domača stran in O njej) z uporabo komponente StyledLink, ustvarjene v 4. vrstici nad njima, obe ločeni z oznako hr za namene oblikovanja.
6. Vrstice 8–11 ustvarijo dve funkcionalni komponenti, imenovani Domov in O tem, ki upodabljata oznake h2 s svojimi imeni znotraj njih, ko jih pokličejo ustrezne komponente Route v vrstici 5 nad obema (Domov upodobi »Domov«, medtem ko O upodobi »O« ).
7. Končno vrstica 12 izvozi komponento aplikacije, tako da jo lahko po potrebi uporabimo drugje v naši aplikaciji

Statični slogi

Statični slogi v React Routerju so slogi, ki se uporabijo za komponento in ostanejo enaki ne glede na morebitne spremembe stanja ali rekvizitov komponente. To je v nasprotju z dinamičnimi slogi, ki se spreminjajo glede na stanje ali elemente komponente. Statične sloge je mogoče uporabiti za ustvarjanje doslednega videza in občutka v aplikaciji, prav tako pa razvijalcem omogočajo preprost način za hitro oblikovanje komponent, ne da bi jih morali ročno prilagoditi vsakič, ko pride do spremembe.

paket stiliziranih komponent

Styled-components je priljubljen paket za React Router, ki razvijalcem omogoča ustvarjanje in upravljanje slogov na ravni komponent v njihovih aplikacijah React. Zagotavlja enostaven način za pisanje kode CSS, ki je omejena na eno samo komponento, kar olajša vzdrževanje in odpravljanje napak. Slogirane komponente prav tako olajšajo skupno rabo slogov med več komponentami in zagotavljajo podporo za tematiziranje. Poleg tega se lahko stilizirane komponente uporabljajo s komponento povezave React Routerja, kar razvijalcem omogoča oblikovanje povezav znotraj njihove aplikacije.

Kako uporabljati statične sloge

Statične sloge je mogoče uporabiti v React Router z uporabo atributa vgrajenega sloga. Ta atribut vam omogoča, da uporabite slog neposredno za element, ne da bi potrebovali ločeno datoteko slogov. Če želite uporabiti statične sloge v React Routerju, boste morali ustvariti slogovni objekt in ga nato posredovati kot argument slogovnemu elementu komponente. Na primer:

const myStyle = {
barva ozadja: '#f2f2f2',
velikost pisave: '20px',
barva: '#000'
};

Podobni objav:

Pustite komentar