Solucionat: reacciona l'encaminador amb estils estàtics

El principal problema relacionat amb l'ús d'estils estàtics amb React Router és que pot ser difícil fer un seguiment de les diferents rutes i els seus estils associats. Amb els estils estàtics, cada ruta ha de tenir el seu propi conjunt de regles CSS, que ràpidament poden esdevenir difícils de manejar i difícils de mantenir. A més, si s'utilitza un estil en diverses rutes, s'ha de duplicar a totes elles, cosa que dificulta mantenir el codi SEC (No et repeteixis).

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. La primera línia importa la biblioteca React.
2. La segona línia importa els components BrowserRouter, Route i Link de la biblioteca react-router-dom.
3. La tercera línia importa el component amb estil de la biblioteca de components amb estil.
4. La quarta línia crea un component StyledLink utilitzant el component Link importat de react-router-dom i l'estil amb color: palevioletred i font-weight: negreta, així com un efecte de gir que canvia el seu color a blanc i elimina qualsevol text. decoració quan es passa per sobre.
5. La cinquena línia crea un component d'aplicació que representa un component d'encaminador amb dos components de ruta dins (un per a Inici i un per a Quant a). També mostra una llista no ordenada de dos enllaços (Inici i Quant a) mitjançant el component StyledLink creat a la línia 4 a sobre d'ells, separats per una etiqueta hr per a finalitats d'estil.
6. Les línies 8 a 11 creen dos components funcionals anomenats Inici i About que representen les etiquetes h2 amb els seus noms respectius dins quan els demanen els components de ruta respectius a la línia 5 a sobre d'ells (Home representa "Inici" mentre que "Quant a" representa "Quant a" ).
7. Finalment, Line 12 exporta el component de l'aplicació perquè es pugui utilitzar en qualsevol altre lloc de la nostra aplicació si cal

Estils estàtics

Els estils estàtics de React Router són estils que s'apliquen a un component i es mantenen iguals independentment de qualsevol canvi a l'estat o als accessoris del component. Això contrasta amb els estils dinàmics, que canvien en funció de l'estat o dels accessoris d'un component. Els estils estàtics es poden utilitzar per crear un aspecte coherent en una aplicació, a més de proporcionar una manera senzilla perquè els desenvolupadors puguin estilitzar ràpidament els components sense haver d'ajustar-los manualment cada vegada que hi ha un canvi.

paquet de components amb estil

Styled-components és un paquet popular per a React Router que permet als desenvolupadors crear i gestionar estils a nivell de components a les seves aplicacions React. Proporciona una manera senzilla d'escriure codi CSS que s'aplica a un únic component, cosa que facilita el manteniment i la depuració. Els components amb estil també fan que sigui més fàcil compartir estils entre diversos components, a més de proporcionar suport per a la temàtica. A més, els components d'estil es poden utilitzar amb el component d'enllaç de React Router, que permet als desenvolupadors dissenyar els enllaços dins de la seva aplicació.

Com utilitzar els estils estàtics

Els estils estàtics es poden utilitzar a React Router mitjançant l'atribut d'estil en línia. Aquest atribut us permet aplicar un estil directament a un element sense necessitat d'un full d'estil separat. Per utilitzar estils estàtics a React Router, haureu de crear un objecte d'estil i després passar-lo com a argument a l'accessori d'estil del component. Per exemple:

const myStyle = {
color de fons: '#f2f2f2',
FontSize: '20px',
color: '#000'
};