Le principal problème lié à l'utilisation de styles statiques avec React Router est qu'il peut être difficile de suivre les différentes routes et leurs styles associés. Avec les styles statiques, chaque route doit avoir son propre ensemble de règles CSS, qui peuvent rapidement devenir lourdes et difficiles à maintenir. De plus, si un style est utilisé dans plusieurs itinéraires, il doit être dupliqué sur chacun d'eux, ce qui rend difficile le maintien du code DRY (Ne vous répétez pas).
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 première ligne importe la bibliothèque React.
2. La deuxième ligne importe les composants BrowserRouter, Route et Link de la bibliothèque react-router-dom.
3. La troisième ligne importe le composant stylé à partir de la bibliothèque de composants stylés.
4. La quatrième ligne crée un composant StyledLink à l'aide du composant Link importé de react-router-dom et le stylise avec color: palevioletred et font-weight: bold, ainsi qu'un effet de survol qui change sa couleur en blanc et supprime tout texte décoration au survol.
5. La cinquième ligne crée un composant App qui restitue un composant Router avec deux composants Route à l'intérieur (un pour Home et un pour About). Il affiche également une liste non ordonnée de deux liens (Accueil et À propos) à l'aide du composant StyledLink créé à la ligne 4 au-dessus d'eux, tous deux séparés par une balise hr à des fins de style.
6. Les lignes 8 à 11 créent deux composants fonctionnels appelés Home et About qui restituent les balises h2 avec leurs noms respectifs à l'intérieur lorsqu'ils sont appelés par leurs composants Route respectifs dans la ligne 5 au-dessus d'eux (Home rend "Home" tandis que About rend "About" ).
7. Enfin, Line 12 exporte le composant App afin qu'il puisse être utilisé ailleurs dans notre application si nécessaire
Styles statiques
Les styles statiques dans React Router sont des styles qui sont appliqués à un composant et restent les mêmes quelles que soient les modifications apportées à l'état ou aux accessoires du composant. Cela contraste avec les styles dynamiques, qui changent en fonction de l'état ou des accessoires d'un composant. Les styles statiques peuvent être utilisés pour créer une apparence et une convivialité cohérentes dans une application, ainsi que pour fournir aux développeurs un moyen simple de styliser rapidement les composants sans avoir à les ajuster manuellement à chaque modification.
package de composants stylés
Styled-components est un package populaire pour React Router qui permet aux développeurs de créer et de gérer des styles au niveau des composants dans leurs applications React. Il fournit un moyen simple d'écrire du code CSS limité à un seul composant, ce qui facilite la maintenance et le débogage. Les composants stylés facilitent également le partage de styles entre plusieurs composants, ainsi que la prise en charge de la thématisation. De plus, les composants stylés peuvent être utilisés avec le composant Link de React Router, permettant aux développeurs de styliser les liens dans leur application.
Comment utiliser les styles statiques
Les styles statiques peuvent être utilisés dans React Router en utilisant l'attribut de style en ligne. Cet attribut vous permet d'appliquer un style directement à un élément sans avoir besoin d'une feuille de style séparée. Pour utiliser des styles statiques dans React Router, vous devrez créer un objet de style, puis le transmettre en tant qu'argument au style prop du composant. Par example:
const monStyle = {
couleur de fond : '#f2f2f2′,
taille de la police : '20px',
couleur : '#000'
};
