Lahendatud: reageerige ruuterile staatiliste stiilide abil

Peamine probleem, mis on seotud React Routeriga staatiliste stiilide kasutamisega, on see, et erinevate marsruutide ja nendega seotud stiilide jälgimine võib olla keeruline. Staatiliste stiilide puhul peab igal marsruudil olema oma CSS-reeglite komplekt, mis võib kiiresti muutuda kohmakaks ja raskesti hooldatavaks. Lisaks, kui stiili kasutatakse mitmel marsruudil, tuleb see kõigis marsruutides dubleerida, muutes koodi KUIVAS hoidmise keeruliseks (Ära korda ennast).

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. Esimene rida impordib Reacti teegi.
2. Teine rida impordib react-ruuter-dom teegist komponendid BrowserRouter, Route ja Link.
3. Kolmas rida impordib stiilitud komponendi stiilide komponentide teegist.
4. Neljas rida loob komponendi StyledLink, kasutades react-router-domist imporditud linki komponenti ja stiilib selle värviga: kahvatupunane ja font-weight: paksus, samuti hõljutusefekti, mis muudab selle värvi valgeks ja eemaldab igasuguse teksti. kaunistus, kui kursor üle hõljub.
5. Viies rida loob rakenduse komponendi, mis renderdab ruuteri komponendi, mille sees on kaks marsruudi komponenti (üks kodu jaoks ja teine ​​teabe jaoks). Samuti renderdab see kahe lingi (Avaleht ja Teave) järjestamata loendi, kasutades nende kohal 4. real loodud komponenti StyledLink, mis on stiili eesmärgil eraldatud hr-sildiga.
6. Read 8–11 loovad kaks funktsionaalset komponenti nimega Kodu ja Teave, mis renderdavad h2 sildid koos nende vastavate nimedega, kui nende mõlema kohal olevad 5. real olevad marsruudi komponendid seda kutsuvad (Home renderdab "Kodu" ja Teave "Teave". ).
7. Lõpuks ekspordib rida 12 rakenduse komponendi, et seda saaks vajadusel kasutada mujal meie rakenduses

Staatilised stiilid

React Routeri staatilised stiilid on stiilid, mida rakendatakse komponendile ja mis jäävad samaks sõltumata komponendi oleku või rekvisiitide muudatustest. See on vastupidine dünaamilistele stiilidele, mis muutuvad sõltuvalt komponendi olekust või rekvisiitidest. Staatilisi stiile saab kasutada rakenduse ühtse välimuse ja tunde loomiseks ning arendajatele lihtsaks viisiks komponentide kiireks stiilimiseks, ilma et peaks neid iga kord, kui toimub muudatus, käsitsi kohandama.

stiililiste komponentide pakett

Stiilitud komponendid on React Routeri populaarne pakett, mis võimaldab arendajatel oma Reacti rakendustes komponenditaseme stiile luua ja hallata. See pakub lihtsat viisi ühele komponendile suunatud CSS-koodi kirjutamiseks, muutes selle hooldamise ja silumise lihtsamaks. Stiilitud komponendid hõlbustavad ka stiilide jagamist mitme komponendi vahel ning pakuvad tuge teemade kujundamisel. Lisaks saab stiilitud komponente kasutada koos React Routeri lingi komponendiga, mis võimaldab arendajatel oma rakenduses linke stiilida.

Kuidas kasutada staatilisi stiile

Staatilisi stiile saab kasutada React Routeris, kasutades atribuuti inline style. See atribuut võimaldab teil stiili otse elemendile rakendada, ilma et oleks vaja eraldi stiililehte. Staatiliste stiilide kasutamiseks React Routeris peate looma stiiliobjekti ja seejärel edastama selle argumendina komponendi stiilirekvisiidile. Näiteks:

const myStyle = {
backgroundColor: '#f2f2f2',
fondi suurus: '20px',
värv: '#000'
};