Gelöst: Router mit statischen Stilen reagieren

Das Hauptproblem bei der Verwendung statischer Stile mit React Router besteht darin, dass es schwierig sein kann, den Überblick über die verschiedenen Routen und die damit verbundenen Stile zu behalten. Bei statischen Stilen muss jede Route ihre eigenen CSS-Regeln haben, was schnell unhandlich und schwer zu warten sein kann. Wenn ein Stil in mehreren Routen verwendet wird, muss er außerdem über alle dupliziert werden, was es schwierig macht, den Code DRY (Don't Repeat Yourself) zu halten.

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. Die erste Zeile importiert die React-Bibliothek.
2. Die zweite Zeile importiert die BrowserRouter-, Route- und Link-Komponenten aus der React-Router-Dom-Bibliothek.
3. Die dritte Zeile importiert die gestylte Komponente aus der styled-components-Bibliothek.
4. Die vierte Zeile erstellt eine StyledLink-Komponente unter Verwendung der Link-Komponente, die aus React-Router-Dom importiert wurde, und gestaltet sie mit Farbe: Palevioletred und Schriftgewicht: Fett sowie einem Hover-Effekt, der seine Farbe in Weiß ändert und jeglichen Text entfernt Dekoration, wenn darüber gefahren wird.
5. Die fünfte Zeile erstellt eine App-Komponente, die eine Router-Komponente mit zwei darin enthaltenen Route-Komponenten darstellt (eine für Home und eine für About). Es rendert auch eine ungeordnete Liste von zwei Links (Home und About) unter Verwendung der StyledLink-Komponente, die in Zeile 4 über ihnen erstellt wurde, beide getrennt durch ein hr-Tag für Styling-Zwecke.
6. Die Zeilen 8 – 11 erstellen zwei funktionale Komponenten namens Home und About, die h2-Tags mit ihren jeweiligen Namen darin rendern, wenn sie von ihren jeweiligen Route-Komponenten in Zeile 5 über ihnen aufgerufen werden (Home rendert „Home“, während About „About“ rendert). ).
7. Schließlich exportiert Line 12 die App-Komponente, damit sie bei Bedarf an anderer Stelle in unserer Anwendung verwendet werden kann

Statische Stile

Statische Stile in React Router sind Stile, die auf eine Komponente angewendet werden und unabhängig von Änderungen des Status oder der Requisiten der Komponente gleich bleiben. Dies steht im Gegensatz zu dynamischen Stilen, die sich je nach Zustand oder Requisiten einer Komponente ändern. Statische Stile können verwendet werden, um ein konsistentes Aussehen und Verhalten in einer Anwendung zu schaffen, und bieten Entwicklern eine einfache Möglichkeit, Komponenten schnell zu gestalten, ohne sie bei jeder Änderung manuell anpassen zu müssen.

styled-components-Paket

Styled-components ist ein beliebtes Paket für React Router, mit dem Entwickler Stile auf Komponentenebene in ihren React-Anwendungen erstellen und verwalten können. Es bietet eine einfache Möglichkeit, CSS-Code zu schreiben, der auf eine einzelne Komponente beschränkt ist, was die Wartung und das Debuggen erleichtert. Styled-Components erleichtern auch die gemeinsame Nutzung von Styles über mehrere Komponenten hinweg und bieten Unterstützung für Theming. Darüber hinaus können Styled-Komponenten mit der Link-Komponente von React Router verwendet werden, sodass Entwickler Links innerhalb ihrer Anwendung stylen können.

So verwenden Sie statische Stile

Statische Stile können in React Router mithilfe des Inline-Stilattributs verwendet werden. Mit diesem Attribut können Sie einen Stil direkt auf ein Element anwenden, ohne dass ein separates Stylesheet erforderlich ist. Um statische Styles in React Router zu verwenden, müssen Sie ein Style-Objekt erstellen und es dann als Argument an die Style-Prop der Komponente übergeben. Zum Beispiel:

const meinStil = {
Hintergrundfarbe: '#f2f2f2',
Schriftgröße: '20px',
Farbe: '#000'
};