Vyriešené: reagujte na router pomocou statických štýlov

Hlavným problémom súvisiacim s používaním statických štýlov s React Router je to, že môže byť ťažké sledovať rôzne trasy a ich pridružené štýly. Pri statických štýloch musí mať každá cesta svoj vlastný súbor pravidiel CSS, ktoré sa môžu rýchlo stať nepraktickými a ťažko udržiavateľnými. Okrem toho, ak sa štýl používa vo viacerých trasách, je potrebné ho duplikovať vo všetkých z nich, čo sťažuje udržiavanie kódu v suchu (Don't Repeat Yourself).

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. Prvý riadok importuje knižnicu React.
2. Druhý riadok importuje komponenty BrowserRouter, Route a Link z knižnice Reag-router-dom.
3. Tretí riadok importuje štylizovaný komponent z knižnice štylizovaných komponentov.
4. Štvrtý riadok vytvorí komponent StyledLink pomocou komponentu Link importovaného z Reag-router-dom a upraví ho farbou: svetlofialová a font-weight: bold, ako aj efektom vznášania sa, ktorý zmení farbu na bielu a odstráni akýkoľvek text. dekorácia pri prejdení myšou.
5. Piaty riadok vytvorí komponent App, ktorý vykreslí komponent Router s dvomi komponentmi Route vo vnútri (jeden pre Domov a jeden pre O aplikácii). Tiež vykresľuje neusporiadaný zoznam dvoch odkazov (Domov a Informácie) pomocou komponentu StyledLink vytvorenom v riadku 4 nad nimi, pričom oba sú oddelené značkou hr na účely úpravy štýlu.
6. Riadky 8 – 11 vytvárajú dva funkčné komponenty s názvom Home a About, ktoré vykresľujú značky h2 s ich príslušnými názvami vo vnútri, keď sú vyvolané ich príslušnými komponentmi Route v riadku 5 nad nimi (Home vykreslí „Home“, zatiaľ čo About vykreslí „About“ ).
7. Nakoniec riadok 12 exportuje komponent App, takže ho možno v prípade potreby použiť inde v našej aplikácii

Statické štýly

Statické štýly v React Router sú štýly, ktoré sa aplikujú na komponent a zostávajú rovnaké bez ohľadu na akékoľvek zmeny stavu komponentu alebo rekvizít. Toto je rozdiel od dynamických štýlov, ktoré sa menia v závislosti od stavu alebo rekvizít komponentu. Statické štýly je možné použiť na vytvorenie konzistentného vzhľadu a dojmu v celej aplikácii a zároveň poskytujú vývojárom jednoduchý spôsob, ako rýchlo upravovať komponenty bez toho, aby ich museli manuálne upravovať pri každej zmene.

balík štylizovaných komponentov

Styled-components je populárny balík pre React Router, ktorý umožňuje vývojárom vytvárať a spravovať štýly na úrovni komponentov v ich aplikáciách React. Poskytuje jednoduchý spôsob písania kódu CSS, ktorý sa vzťahuje na jeden komponent, čo uľahčuje údržbu a ladenie. Komponenty so štýlom tiež uľahčujú zdieľanie štýlov medzi viacerými komponentmi, ako aj poskytujú podporu pre tematicky. Okrem toho, štylizované komponenty možno použiť s komponentom React Router Link, čo umožňuje vývojárom upravovať štýl odkazov v rámci ich aplikácie.

Ako používať statické štýly

Statické štýly je možné použiť v React Router pomocou atribútu inline style. Tento atribút vám umožňuje použiť štýl priamo na prvok bez potreby samostatnej šablóny so štýlmi. Ak chcete použiť statické štýly v React Router, budete musieť vytvoriť objekt štýlu a potom ho odovzdať ako argument podpere štýlu komponentu. Napríklad:

const myStyle = {
backgroundColor: '#f2f2f2′,
fontSize: '20px',
farba: '#000'
};