Rešeno: reagovati ruter koristeći statičke stilove

Glavni problem vezan za korištenje statičkih stilova s ​​React Routerom je taj što može biti teško pratiti različite rute i njihove povezane stilove. Sa statičnim stilovima, svaka ruta mora imati svoj vlastiti skup CSS pravila, koja brzo mogu postati glomazna i teška za održavanje. Osim toga, ako se stil koristi u više ruta, potrebno ga je duplicirati na svim njima, što otežava održavanje koda SUVI (Nemojte se ponavljati).

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. Prvi red uvozi React biblioteku.
2. Drugi red uvozi komponente BrowserRouter, Route i Link iz biblioteke react-router-dom.
3. Treći red uvozi stiliziranu komponentu iz biblioteke stiliziranih komponenti.
4. Četvrti red kreira StyledLink komponentu koristeći komponentu Link uvezenu iz react-router-doma i stilizira je bojom: palevioletred i font-weight: bold, kao i efektom lebdenja koji mijenja svoju boju u bijelu i uklanja svaki tekst ukras kada pređete iznad.
5. Peti red kreira komponentu aplikacije koja prikazuje komponentu rutera s dvije komponente rute unutar nje (jedna za početnu i jednu za About). Također prikazuje neuređenu listu od dvije veze (Home i About) koristeći komponentu StyledLink kreiranu u liniji 4 iznad njih obje odvojene hr tagom u svrhu stiliziranja.
6. Linije 8 – 11 kreiraju dvije funkcionalne komponente pod nazivom Početna i O kojima se prikazuju h2 oznake s njihovim odgovarajućim imenima unutar njih kada ih pozovu njihove odgovarajuće komponente rute u redu 5 iznad njih (Home prikazuje “Home” dok About prikazuje “About” ).
7. Konačno, linija 12 izvozi komponentu aplikacije tako da se može koristiti drugdje u našoj aplikaciji ako je potrebno

Statički stilovi

Statički stilovi u React Routeru su stilovi koji se primjenjuju na komponentu i ostaju isti bez obzira na bilo kakve promjene u stanju komponente ili propsima. Ovo je u suprotnosti s dinamičkim stilovima, koji se mijenjaju ovisno o stanju ili rekvizitima komponente. Statički stilovi se mogu koristiti za stvaranje konzistentnog izgleda i osjećaja u aplikaciji, kao i za jednostavan način za programere da brzo stiliziraju komponente bez potrebe da ih ručno prilagođavaju svaki put kada dođe do promjene.

styled-components paket

Styled-components je popularan paket za React Router koji omogućava programerima da kreiraju i upravljaju stilovima na nivou komponente u svojim React aplikacijama. Pruža jednostavan način za pisanje CSS koda koji je ograničen na jednu komponentu, što olakšava održavanje i otklanjanje grešaka. Styled-components također olakšava dijeljenje stilova između više komponenti, kao i pružanje podrške za teme. Dodatno, stilizovane komponente se mogu koristiti sa komponentom Link React Routera, omogućavajući programerima da stiliziraju veze unutar svoje aplikacije.

Kako koristiti statičke stilove

Statički stilovi se mogu koristiti u React Routeru korištenjem inline style atributa. Ovaj atribut vam omogućava da primenite stil direktno na element bez potrebe za posebnom tablicom stilova. Da biste koristili statičke stilove u React Routeru, morat ćete kreirati objekt stila, a zatim ga proslijediti kao argument komponenti style propa. Na primjer:

const myStyle = {
boja pozadine: '#f2f2f2′,
Veličina fonta: '20px',
boja: '#000'
};