Löst: reagera routern med statiska stilar

Det största problemet med att använda statiska stilar med React Router är att det kan vara svårt att hålla reda på de olika rutterna och deras tillhörande stilar. Med statiska stilar måste varje rutt ha sin egen uppsättning CSS-regler, som snabbt kan bli svårhanterliga och svåra att underhålla. Dessutom, om en stil används i flera rutter, måste den dupliceras över dem alla, vilket gör det svårt att hålla koden DRY (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örsta raden importerar React-biblioteket.
2. Den andra raden importerar komponenterna BrowserRouter, Route och Link från react-router-dom-biblioteket.
3. Den tredje raden importerar den formaterade komponenten från biblioteket med formaterade komponenter.
4. Den fjärde raden skapar en StyledLink-komponent med hjälp av Link-komponenten som importeras från react-router-dom och stilar den med färg: blekviolett och font-weight: bold, samt en hovringseffekt som ändrar sin färg till vit och tar bort all text dekoration när den hålls över.
5. Den femte raden skapar en appkomponent som återger en routerkomponent med två ruttkomponenter inuti den (en för Hem och en för Om). Den återger också en oordnad lista med två länkar (Hem och Om) med hjälp av StyledLink-komponenten skapad på rad 4 ovanför dem båda åtskilda av en hr-tagg för stylingändamål.
6. Raderna 8 – 11 skapar två funktionella komponenter som kallas Hem och Om som återger h2-taggar med sina respektive namn inuti dem när de anropas av deras respektive ruttkomponenter på rad 5 ovanför dem båda (Hem återger "Hem" medan Om återger "Om" ).
7. Slutligen exporterar Linje 12 App-komponenten så att den kan användas någon annanstans i vår applikation om det behövs

Statiska stilar

Statiska stilar i React Router är stilar som appliceras på en komponent och förblir desamma oavsett ändringar i komponentens tillstånd eller rekvisita. Detta i motsats till dynamiska stilar, som ändras beroende på tillståndet eller rekvisita för en komponent. Statiska stilar kan användas för att skapa ett konsekvent utseende och känsla i en applikation, samt ge ett enkelt sätt för utvecklare att snabbt utforma komponenter utan att behöva justera dem manuellt varje gång det sker en förändring.

paket med stilade komponenter

Styled-components är ett populärt paket för React Router som låter utvecklare skapa och hantera stilar på komponentnivå i sina React-applikationer. Det ger ett enkelt sätt att skriva CSS-kod som är anpassad till en enskild komponent, vilket gör det lättare att underhålla och felsöka. Styled-components gör det också lättare att dela stilar över flera komponenter, samt ger stöd för teman. Dessutom kan stilade komponenter användas med React Routers Link-komponent, vilket gör att utvecklare kan utforma länkar i sin applikation.

Hur man använder statiska stilar

Statiska stilar kan användas i React Router genom att använda attributet inline style. Det här attributet låter dig tillämpa en stil direkt på ett element utan att behöva en separat stilmall. För att använda statiska stilar i React Router måste du skapa ett stilobjekt och sedan skicka det som ett argument till komponentens stilprop. Till exempel:

const myStyle = {
bakgrundsfärg: '#f2f2f2',
teckenstorlek: '20px',
färg: '#000'
};

Relaterade inlägg:

Lämna en kommentar