Ratkaistu: reagoi reitittimeen käyttämällä staattisia tyylejä

Suurin ongelma, joka liittyy staattisten tyylien käyttöön React Routerissa, on, että voi olla vaikeaa seurata eri reittejä ja niihin liittyviä tyylejä. Staattisia tyylejä käytettäessä jokaisella reitillä on oltava omat CSS-sääntönsä, jotka voivat nopeasti tulla raskaaksi ja vaikeasti ylläpidettäväksi. Lisäksi, jos tyyliä käytetään useilla reiteillä, se on monistettava niille kaikille, mikä vaikeuttaa koodin pitämistä KUIVANA (Älä toista itseäsi).

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. Ensimmäinen rivi tuo React-kirjaston.
2. Toinen rivi tuo BrowserRouter-, Route- ja Link-komponentit react-router-dom-kirjastosta.
3. Kolmas rivi tuo tyylitellyn komponentin styled-components -kirjastosta.
4. Neljäs rivi luo StyledLink-komponentin käyttämällä linkkikomponenttia, joka on tuotu react-router-domista ja tyylittelee sen värillä: vaaleanviolettipunainen ja font-weight: lihavoitu, sekä hover-tehosteen, joka muuttaa värinsä valkoiseksi ja poistaa kaiken tekstin. koristeena, kun osoitin vie sen päälle.
5. Viides rivi luo sovelluskomponentin, joka tekee Router-komponentin, jonka sisällä on kaksi Route-komponenttia (yksi Koti- ja toinen Tietoja varten). Se tekee myös järjestämättömän luettelon kahdesta linkistä (Etusivu ja Tietoja) käyttämällä niiden yläpuolella olevalla rivillä 4 luotua StyledLink-komponenttia, jotka molemmat erotetaan hr-tunnisteella muotoilua varten.
6. Rivit 8 - 11 luovat kaksi toiminnallista komponenttia nimeltä Koti ja Tietoja, jotka hahmontavat h2-tunnisteet ja niiden vastaavat nimet niiden sisällä, kun vastaavat Reittikomponentit niitä molempien yläpuolella rivillä 5 kutsuvat (Koti näyttää "Koti" ja Tietoja "Tietoja" ).
7. Lopuksi rivi 12 vie App-komponentin, jotta sitä voidaan tarvittaessa käyttää muualla sovelluksessamme

Staattiset tyylit

React Routerin staattiset tyylit ovat tyylejä, joita sovelletaan komponenttiin ja jotka pysyvät samoina riippumatta komponentin tilan tai ominaisuuksien muutoksista. Tämä on toisin kuin dynaamiset tyylit, jotka muuttuvat komponentin tilan tai rekvisiittauksen mukaan. Staattisten tyylien avulla voidaan luoda yhtenäinen ulkoasu ja tuntuma sovelluksessa sekä tarjota kehittäjille helppo tapa muotoilla komponentteja nopeasti ilman, että niitä tarvitsee säätää manuaalisesti aina, kun tapahtuu muutoksia.

tyylitelty-komponenttipaketti

Styled-components on suosittu React Router -paketti, jonka avulla kehittäjät voivat luoda ja hallita komponenttitason tyylejä React-sovelluksissaan. Se tarjoaa helpon tavan kirjoittaa CSS-koodia, joka on rajattu yhteen komponenttiin, mikä helpottaa sen ylläpitoa ja virheenkorjausta. Tyylitellyt komponentit helpottavat myös tyylien jakamista useiden komponenttien välillä ja tarjoavat tukea teemoille. Lisäksi tyyliteltyjä komponentteja voidaan käyttää React Routerin linkkikomponentin kanssa, jolloin kehittäjät voivat tyylittää sovelluksensa linkkejä.

Staattisten tyylien käyttäminen

Staattisia tyylejä voidaan käyttää React Routerissa käyttämällä inline style -attribuuttia. Tämän määritteen avulla voit käyttää tyyliä suoraan elementtiin ilman erillistä tyylitaulukkoa. Jos haluat käyttää staattisia tyylejä React Routerissa, sinun on luotava tyyliobjekti ja välitettävä se sitten argumenttina komponentin tyyliehdotukselle. Esimerkiksi:

const myStyle = {
backgroundColor: '#f2f2f2',
fontSize: '20px',
väri: '#000'
};