Opgelost: reageer router met behulp van statische stijlen

Het grootste probleem met betrekking tot het gebruik van statische stijlen met React Router is dat het moeilijk kan zijn om de verschillende routes en de bijbehorende stijlen bij te houden. Met statische stijlen moet elke route zijn eigen set CSS-regels hebben, die snel log en moeilijk te onderhouden kunnen worden. Bovendien, als een stijl in meerdere routes wordt gebruikt, moet deze in alle routes worden gedupliceerd, waardoor het moeilijk wordt om de code DRY (Don't Repeat Yourself) te houden.

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. De eerste regel importeert de React-bibliotheek.
2. De tweede regel importeert de BrowserRouter-, Route- en Link-componenten uit de react-router-dom-bibliotheek.
3. De derde regel importeert de gestileerde component uit de bibliotheek met gestileerde componenten.
4. De vierde regel maakt een StyledLink-component met behulp van de Link-component die is geïmporteerd uit react-router-dom en maakt deze op met kleur: palevioletred en font-weight: bold, evenals een zweefeffect dat van kleur verandert in wit en alle tekst verwijdert decoratie als er overheen wordt gehangen.
5. De vijfde regel maakt een App-component die een Router-component weergeeft met daarin twee Route-componenten (een voor Thuis en een voor Over). Het geeft ook een ongeordende lijst weer van twee links (Home en About) met behulp van de StyledLink-component die is gemaakt in regel 4 erboven, beide gescheiden door een hr-tag voor stylingdoeleinden.
6. Regels 8 – 11 creëren twee functionele componenten genaamd Home en About die h2-tags weergeven met hun respectieve namen erin wanneer ze worden aangeroepen door hun respectievelijke Route-componenten in regel 5 erboven (Home geeft "Home" weer terwijl About "About" weergeeft ).
7. Ten slotte exporteert Line 12 de app-component zodat deze indien nodig elders in onze applicatie kan worden gebruikt

Statische stijlen

Statische stijlen in React Router zijn stijlen die worden toegepast op een component en hetzelfde blijven, ongeacht eventuele wijzigingen in de staat of rekwisieten van de component. Dit in tegenstelling tot dynamische stijlen, die veranderen afhankelijk van de staat of rekwisieten van een component. Statische stijlen kunnen worden gebruikt om een ​​consistente look en feel in een applicatie te creëren, en bieden ontwikkelaars ook een gemakkelijke manier om snel componenten te stylen zonder dat ze ze elke keer handmatig hoeven aan te passen als er een wijziging is.

pakket met gestileerde componenten

Styled-components is een populair pakket voor React Router waarmee ontwikkelaars stijlen op componentniveau kunnen maken en beheren in hun React-applicaties. Het biedt een eenvoudige manier om CSS-code te schrijven die is gericht op een enkele component, waardoor het gemakkelijker te onderhouden en te debuggen is. Gestileerde componenten maken het ook gemakkelijker om stijlen over meerdere componenten te delen en bieden ondersteuning voor thema's. Bovendien kunnen gestileerde componenten worden gebruikt met de Link-component van React Router, waardoor ontwikkelaars links binnen hun applicatie kunnen stylen.

Statische stijlen gebruiken

Statische stijlen kunnen worden gebruikt in React Router door gebruik te maken van het inline style attribuut. Met dit attribuut kunt u een stijl direct op een element toepassen zonder dat u een aparte stylesheet nodig heeft. Om statische stijlen in React Router te gebruiken, moet u een stijlobject maken en dit vervolgens als argument doorgeven aan de stijlprop van de component. Bijvoorbeeld:

const mijnStijl = {
achtergrondkleur: '#f2f2f2′,
lettergrootte: '20px',
kleur: '#000'
};