Løst: reager ruteren ved å bruke statiske stiler

Hovedproblemet knyttet til bruk av statiske stiler med React Router er at det kan være vanskelig å holde styr på de forskjellige rutene og deres tilhørende stiler. Med statiske stiler må hver rute ha sitt eget sett med CSS-regler, som fort kan bli uhåndterlige og vanskelige å vedlikeholde. I tillegg, hvis en stil brukes i flere ruter, må den dupliseres på tvers av dem alle, noe som gjør det vanskelig å holde koden DRY (Ikke gjenta deg selv).

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. Den første linjen importerer React-biblioteket.
2. Den andre linjen importerer BrowserRouter-, Route- og Link-komponentene fra react-router-dom-biblioteket.
3. Den tredje linjen importerer den stilede komponenten fra biblioteket med stilte komponenter.
4. Den fjerde linjen lager en StyledLink-komponent ved å bruke Link-komponenten importert fra react-router-dom og stiler den med farge: palevioletred og font-weight: bold, samt en hover-effekt som endrer fargen til hvit og fjerner all tekst dekorasjon når den holdes over.
5. Den femte linjen oppretter en app-komponent som gjengir en ruterkomponent med to rutekomponenter inni den (en for Hjem og en for Om). Den gjengir også en uordnet liste over to lenker (Hjem og Om) ved å bruke StyledLink-komponenten opprettet i linje 4 over dem begge atskilt med en hr-tag for stylingformål.
6. Linje 8 – 11 oppretter to funksjonelle komponenter kalt Hjem og Om som gjengir h2-tagger med deres respektive navn inni dem når de kalles opp av deres respektive rutekomponenter på linje 5 over dem begge (Hjem gjengir «Hjem» mens Om gjengir «Om» ).
7. Til slutt eksporterer Linje 12 App-komponenten slik at den kan brukes andre steder i applikasjonen vår om nødvendig

Statiske stiler

Statiske stiler i React Router er stiler som brukes på en komponent og forblir de samme uavhengig av endringer i komponentens tilstand eller rekvisitter. Dette er i motsetning til dynamiske stiler, som endres avhengig av tilstanden eller rekvisittene til en komponent. Statiske stiler kan brukes til å skape et konsistent utseende og følelse på tvers av en applikasjon, samt gi en enkel måte for utviklere å raskt style komponenter uten å måtte justere dem manuelt hver gang det er en endring.

pakke med stilede komponenter

Styled-components er en populær pakke for React Router som lar utviklere lage og administrere stiler på komponentnivå i sine React-applikasjoner. Det gir en enkel måte å skrive CSS-kode som er scoped til en enkelt komponent, noe som gjør det enklere å vedlikeholde og feilsøke. Stylede-komponenter gjør det også enklere å dele stiler på tvers av flere komponenter, i tillegg til å gi støtte for temaer. I tillegg kan stylede komponenter brukes med React Routers Link-komponent, slik at utviklere kan style lenker i applikasjonen deres.

Hvordan bruke statiske stiler

Statiske stiler kan brukes i React Router ved å bruke inline style-attributtet. Dette attributtet lar deg bruke en stil direkte på et element uten behov for et eget stilark. For å bruke statiske stiler i React Router, må du lage et stilobjekt og deretter sende det som et argument til komponentens stilpropp. For eksempel:

const myStyle = {
bakgrunnsfarge: '#f2f2f2',
skriftstørrelse: '20px',
farge: '#000'
};