Løst: Reager router ved hjælp af statiske stilarter

Hovedproblemet i forbindelse med brug af statiske stilarter med React Router er, at det kan være svært at holde styr på de forskellige ruter og deres tilhørende stilarter. Med statiske stilarter skal hver rute have sit eget sæt af CSS-regler, som hurtigt kan blive uhåndterlige og svære at vedligeholde. Derudover, hvis en stil bruges på flere ruter, skal den duplikeres på tværs af dem alle, hvilket gør det vanskeligt at holde koden TØR (Don't Repeat Yourself).

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 linje importerer React-biblioteket.
2. Den anden linje importerer BrowserRouter-, Route- og Link-komponenterne fra react-router-dom-biblioteket.
3. Den tredje linje importerer den stilede komponent fra biblioteket med stilede komponenter.
4. Den fjerde linje opretter en StyledLink-komponent ved hjælp af Link-komponenten importeret fra react-router-dom og styles den med farve: palevioletred og font-weight: fed, samt en hover-effekt, der ændrer dens farve til hvid og fjerner al tekst dekoration, når den holdes over.
5. Den femte linje opretter en app-komponent, der gengiver en routerkomponent med to rutekomponenter indeni (en til Hjem og en til Om). Den gengiver også en uordnet liste over to links (Hjem og Om) ved hjælp af StyledLink-komponenten oprettet i linje 4 over dem begge adskilt af et hr-tag til stylingformål.
6. Linje 8 – 11 opretter to funktionelle komponenter kaldet Home og About, der gengiver h2-tags med deres respektive navne indeni dem, når de kaldes på af deres respektive rutekomponenter i Linie 5 over dem begge (Hjem gengiver "Hjem", mens About gengiver "Om" ).
7. Endelig eksporterer Linje 12 App-komponenten, så den kan bruges andre steder i vores applikation, hvis det er nødvendigt

Statiske stilarter

Statiske stilarter i React Router er stilarter, der anvendes på en komponent og forbliver de samme uanset ændringer i komponentens tilstand eller rekvisitter. Dette er i modsætning til dynamiske stilarter, som ændrer sig afhængigt af tilstanden eller rekvisitterne for en komponent. Statiske stilarter kan bruges til at skabe et ensartet udseende på tværs af en applikation, samt give udviklere en nem måde til hurtigt at style komponenter uden at skulle justere dem manuelt, hver gang der er en ændring.

pakke med stilede komponenter

Styled-components er en populær pakke til React Router, der giver udviklere mulighed for at skabe og administrere stilarter på komponentniveau i deres React-applikationer. Det giver en nem måde at skrive CSS-kode, der er scoped til en enkelt komponent, hvilket gør det nemmere at vedligeholde og fejlfinde. Stylede-komponenter gør det også nemmere at dele stilarter på tværs af flere komponenter, samt giver støtte til temaer. Derudover kan stylede komponenter bruges med React Routers Link-komponent, hvilket giver udviklere mulighed for at style links i deres applikation.

Sådan bruger du statiske stilarter

Statiske stilarter kan bruges i React Router ved at bruge attributten inline style. Denne attribut giver dig mulighed for at anvende en typografi direkte på et element uden behov for et separat typografiark. For at bruge statiske stilarter i React Router, skal du oprette et stilobjekt og derefter sende det som et argument til komponentens stilprop. For eksempel:

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