Riješeno: usmjerivač reagira pomoću statičkih stilova

Glavni problem vezan uz 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 vlastiti skup CSS pravila, koja mogu brzo postati nezgrapna i teška za održavanje. Osim toga, ako se stil koristi u više ruta, potrebno ga je duplicirati u svim njima, što otežava održavanje koda SUHIM (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 redak uvozi React biblioteku.
2. Drugi redak uvozi komponente BrowserRouter, Route i Link iz biblioteke react-router-dom.
3. Treći redak uvozi stiliziranu komponentu iz biblioteke styled-components.
4. Četvrti redak stvara StyledLink komponentu pomoću komponente Link uvezene iz react-router-dom i stilizira je bojom: palevioletred i font-weight: bold, kao i efektom lebdenja koji mijenja boju u bijelu i uklanja sav tekst ukras kada lebdi iznad.
5. Peti redak stvara App komponentu koja renderira Router komponentu s dvije Route komponente unutar nje (jedna za Home i jedna za About). Također prikazuje neuređeni popis dviju veza (Početna i O) pomoću komponente StyledLink stvorene u retku 4 iznad njih obje odvojene oznakom hr u svrhu stiliziranja.
6. Linije 8 – 11 stvaraju dvije funkcionalne komponente pod nazivom Home i About koje renderiraju h2 oznake sa svojim odgovarajućim imenima unutar njih kada ih pozovu njihove odgovarajuće komponente Route u retku 5 iznad obje (Home renderira "Home" dok About renderira "About" ).
7. Konačno, linija 12 izvozi App komponentu tako da se može koristiti negdje drugdje u našoj aplikaciji ako je potrebno

Statični stilovi

Statički stilovi u React Routeru su stilovi koji se primjenjuju na komponentu i ostaju isti bez obzira na bilo kakve promjene stanja komponente ili rekvizita. To je u suprotnosti s dinamičkim stilovima, koji se mijenjaju ovisno o stanju ili elementima komponente. Statički stilovi mogu se koristiti za stvaranje dosljednog izgleda i dojma u cijeloj aplikaciji, kao i pružanje jednostavnog načina za programere da brzo stiliziraju komponente bez potrebe da ih ručno prilagođavaju svaki put kad dođe do promjene.

paket stiliziranih komponenti

Styled-components je popularan paket za React Router koji programerima omogućuje stvaranje i upravljanje stilovima na razini komponenti u njihovim React aplikacijama. Omogućuje jednostavan način pisanja CSS koda koji je ograničen na jednu komponentu, što olakšava održavanje i otklanjanje pogrešaka. Styled-components također olakšava dijeljenje stilova u više komponenti, kao i pružanje podrške za tematiziranje. Osim toga, styled-components se mogu koristiti s komponentom Link React Routera, omogućujući programerima da stiliziraju veze unutar svoje aplikacije.

Kako koristiti statične stilove

Statički stilovi mogu se koristiti u React Routeru pomoću atributa ugrađenog stila. Ovaj atribut omogućuje vam primjenu stila izravno na element bez potrebe za zasebnom tablicom stilova. Da biste koristili statičke stilove u React Routeru, morat ćete stvoriti objekt stila i zatim ga proslijediti kao argument za stilski element komponente. Na primjer:

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