Megoldva: reagál a router statikus stílusokkal

A statikus stílusok React Routerrel való használatával kapcsolatos fő probléma az, hogy nehéz lehet nyomon követni a különböző útvonalakat és a hozzájuk tartozó stílusokat. Statikus stílusok esetén minden útvonalnak saját CSS-szabályokkal kell rendelkeznie, amelyek gyorsan nehézkessé és nehezen karbantarthatóvá válhatnak. Ezen túlmenően, ha egy stílust több útvonalon is használnak, akkor mindegyikben meg kell ismételni, ami megnehezíti a kód SZÁRAZON tartását (Ne ismételje meg magát).

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. Az első sor a React könyvtárat importálja.
2. A második sor a BrowserRouter, Route és Link összetevőket importálja a react-router-dom könyvtárból.
3. A harmadik sor a stílusos összetevőt importálja a styled-components könyvtárból.
4. A negyedik sor létrehoz egy StyledLink komponenst a react-router-dom-ból importált Link komponens használatával, és színnel stílusozza: halványlila és font-weight: félkövér, valamint egy lebegő effektust, amely fehérre változtatja a színét, és eltávolítja a szöveget. dekoráció, ha fölé húzzuk.
5. Az ötödik sor létrehoz egy App komponenst, amely egy Router komponenst jelenít meg, benne két Route komponenssel (egy az Otthon és egy a Névjegy számára). Ezenkívül két hivatkozás rendezetlen listáját jeleníti meg (Kezdőlap és Névjegy) a felettük lévő 4. sorban létrehozott StyledLink komponens használatával, mindkettőt hr címkével elválasztva stílusozási célból.
6. A 8–11. sorok két funkcionális komponenst hoznak létre Home és About néven, amelyek a h2 címkéket jelenítik meg a bennük lévő megfelelő nevükkel, amikor a megfelelő Route komponensek hívják őket az 5. sorban (a Home az „Otthon”, míg az About „Névjegy”) ).
7. Végül a 12. sor exportálja az App komponenst, hogy szükség esetén máshol is használható legyen az alkalmazásunkban

Statikus stílusok

A React Router statikus stílusai olyan stílusok, amelyek egy összetevőre vonatkoznak, és változatlanok maradnak, függetlenül az összetevő állapotának vagy kellékeinek változásától. Ez ellentétben áll a dinamikus stílusokkal, amelyek az összetevő állapotától vagy kellékeitől függően változnak. A statikus stílusok segítségével konzisztens megjelenést és érzetet hozhatunk létre az alkalmazásokban, valamint egyszerű módot kínálnak a fejlesztőknek az összetevők gyors stílusozására anélkül, hogy minden változáskor manuálisan módosítaniuk kellene őket.

stílusos komponensek csomagja

A Styled-components a React Router népszerű csomagja, amely lehetővé teszi a fejlesztők számára, hogy komponens szintű stílusokat hozzanak létre és kezeljenek React alkalmazásaikban. Egyszerű módot biztosít egyetlen összetevőre ható CSS-kód írására, megkönnyítve a karbantartást és a hibakeresést. A stílusos összetevők megkönnyítik a stílusok több összetevő között történő megosztását, valamint támogatást nyújtanak a tematikához. Ezenkívül stílusos összetevők használhatók a React Router Link összetevőjével, lehetővé téve a fejlesztők számára, hogy stílusozzák a hivatkozásokat az alkalmazásukon belül.

A statikus stílusok használata

Statikus stílusok használhatók a React Routerben a beépített stílus attribútum használatával. Ez az attribútum lehetővé teszi, hogy egy stílust közvetlenül egy elemre alkalmazzon anélkül, hogy külön stíluslapra lenne szüksége. Statikus stílusok használatához a React Routerben létre kell hoznia egy stílusobjektumot, majd át kell adnia azt argumentumként az összetevő stílusprofiljának. Például:

const myStyle = {
backgroundColor: '#f2f2f2',
betűméret: '20px',
szín: '#000'
};