Zgjidhur: reagoni i ruterit duke përdorur stile statike

Problemi kryesor në lidhje me përdorimin e stileve statike me React Router është se mund të jetë e vështirë të mbash gjurmët e rrugëve të ndryshme dhe stileve të tyre të lidhura. Me stilet statike, secila rrugë duhet të ketë grupin e vet të rregullave CSS, të cilat mund të bëhen shpejt të vështira dhe të vështira për t'u ruajtur. Për më tepër, nëse një stil përdoret në rrugë të shumta, ai duhet të kopjohet në të gjitha ato, duke e bërë të vështirë mbajtjen e kodit DRY (Mos e përsërit veten).

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. Rreshti i parë importon bibliotekën React.
2. Rreshti i dytë importon komponentët BrowserRouter, Route dhe Link nga biblioteka react-router-dom.
3. Rreshti i tretë importon komponentin e stilizuar nga biblioteka e përbërësve të stiluar.
4. Rreshti i katërt krijon një komponent StyledLink duke përdorur komponentin Link të importuar nga react-router-dom dhe e stilon atë me ngjyrën: ngjyrë vjollce të zbehtë dhe peshën e shkronjave: bold, si dhe një efekt hover që ndryshon ngjyrën e tij në të bardhë dhe heq çdo tekst. dekorim kur rri pezull mbi.
5. Rreshti i pestë krijon një komponent App që jep një komponent Router me dy komponentë Route brenda tij (një për Home dhe një për About). Ai gjithashtu jep një listë të parregulluar të dy lidhjeve (Home dhe About) duke përdorur komponentin StyledLink të krijuar në rreshtin 4 sipër tyre të ndara nga një etiketë hr për qëllime stilimi.
6. Rreshtat 8 – 11 krijojnë dy komponentë funksionalë të quajtur Home dhe About që paraqesin etiketat h2 me emrat e tyre përkatës brenda tyre kur thirren nga komponentët e tyre përkatës Route në rreshtin 5 sipër tyre (Home jep "Home" ndërsa About jep "About" ).
7. Së fundi, rreshti 12 eksporton komponentin e aplikacionit në mënyrë që të mund të përdoret diku tjetër në aplikacionin tonë nëse është e nevojshme

Stilet statike

Stilet statike në React Router janë stile që aplikohen në një komponent dhe mbeten të njëjta, pavarësisht nga çdo ndryshim në gjendjen ose elementet e komponentit. Kjo është në kontrast me stilet dinamike, të cilat ndryshojnë në varësi të gjendjes ose mbështetësve të një komponenti. Stilet statike mund të përdoren për të krijuar një pamje dhe ndjesi të qëndrueshme në një aplikacion, si dhe për të ofruar një mënyrë të thjeshtë për zhvilluesit që të stilojnë shpejt komponentët pa pasur nevojë t'i rregullojnë ato manualisht sa herë që ka një ndryshim.

paketë me përbërës të stiluar

Styled-components është një paketë popullore për React Router që lejon zhvilluesit të krijojnë dhe menaxhojnë stilet e nivelit të komponentëve në aplikacionet e tyre React. Ai ofron një mënyrë të thjeshtë për të shkruar kodin CSS që shtrihet në një komponent të vetëm, duke e bërë më të lehtë mirëmbajtjen dhe korrigjimin e gabimeve. Komponentët e stiluar gjithashtu e bëjnë më të lehtë ndarjen e stileve nëpër komponentë të shumtë, si dhe ofron mbështetje për tematikën. Për më tepër, përbërësit e stiluar mund të përdoren me komponentin Link të React Router, duke i lejuar zhvilluesit të stilojnë lidhjet brenda aplikacionit të tyre.

Si të përdorni stilet statike

Stilet statike mund të përdoren në React Router duke përdorur atributin e stilit inline. Ky atribut ju lejon të aplikoni një stil direkt në një element pa pasur nevojë për një fletë stili të veçantë. Për të përdorur stilet statike në React Router, do t'ju duhet të krijoni një objekt stili dhe më pas ta kaloni atë si një argument në bazën e stilit të komponentit. Për shembull:

const myStyle = {
Ngjyra e sfondit: '#f2f2f2',
Madhësia e shkronjave: '20 px',
ngjyra: '#000'
};