Επιλύθηκε: αντιδρά δρομολογητής χρησιμοποιώντας στατικά στυλ

Το κύριο πρόβλημα που σχετίζεται με τη χρήση στατικών στυλ με το React Router είναι ότι μπορεί να είναι δύσκολο να παρακολουθείτε τις διαφορετικές διαδρομές και τα σχετικά στυλ. Με στατικά στυλ, κάθε διαδρομή πρέπει να έχει το δικό της σύνολο κανόνων CSS, το οποίο μπορεί γρήγορα να γίνει δυσκίνητο και δύσκολο να διατηρηθεί. Επιπλέον, εάν ένα στυλ χρησιμοποιείται σε πολλές διαδρομές, πρέπει να αντιγραφεί σε όλες, καθιστώντας δύσκολη τη διατήρηση του κωδικού 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. Η πρώτη γραμμή εισάγει τη βιβλιοθήκη React.
2. Η δεύτερη γραμμή εισάγει τα στοιχεία BrowserRouter, Route και Link από τη βιβλιοθήκη react-router-dom.
3. Η τρίτη γραμμή εισάγει το στοιχείο στυλ από τη βιβλιοθήκη styled-components.
4. Η τέταρτη γραμμή δημιουργεί ένα στοιχείο StyledLink χρησιμοποιώντας το στοιχείο Link που έχει εισαχθεί από το react-router-dom και το διαμορφώνει με χρώμα: παλαιοιώδες και βάρος γραμματοσειράς: έντονη, καθώς και ένα εφέ αιώρησης που αλλάζει το χρώμα του σε λευκό και αφαιρεί οποιοδήποτε κείμενο διακόσμηση όταν αιωρείται από πάνω.
5. Η πέμπτη γραμμή δημιουργεί ένα στοιχείο εφαρμογής που αποδίδει ένα στοιχείο δρομολογητή με δύο στοιχεία διαδρομής μέσα του (ένα για το Home και ένα για το Πληροφορίες). Αποδίδει επίσης μια μη ταξινομημένη λίστα με δύο συνδέσμους (Αρχική σελίδα και Πληροφορίες) χρησιμοποιώντας το στοιχείο StyledLink που δημιουργήθηκε στη Γραμμή 4 πάνω από αυτούς και οι δύο χωρίζονται από μια ετικέτα hr για λόγους στυλ.
6. Οι γραμμές 8 – 11 δημιουργούν δύο λειτουργικά στοιχεία που ονομάζονται Home και About που αποδίδουν ετικέτες h2 με τα αντίστοιχα ονόματά τους μέσα όταν καλούνται από τα αντίστοιχα στοιχεία διαδρομής στη Γραμμή 5 πάνω από τα δύο (Home αποδίδει "Home" ενώ το About αποδίδει "About" ).
7. Τέλος, η γραμμή 12 εξάγει το στοιχείο της εφαρμογής, ώστε να μπορεί να χρησιμοποιηθεί αλλού στην εφαρμογή μας, εάν χρειαστεί

Στατικά Στυλ

Τα στατικά στυλ στο React Router είναι στυλ που εφαρμόζονται σε ένα στοιχείο και παραμένουν ίδια ανεξάρτητα από τυχόν αλλαγές στην κατάσταση ή τα στηρίγματα του στοιχείου. Αυτό έρχεται σε αντίθεση με τα δυναμικά στυλ, τα οποία αλλάζουν ανάλογα με την κατάσταση ή τα στηρίγματα ενός στοιχείου. Τα στατικά στυλ μπορούν να χρησιμοποιηθούν για να δημιουργήσουν μια συνεπή εμφάνιση και αίσθηση σε μια εφαρμογή, καθώς και να παρέχουν έναν εύκολο τρόπο στους προγραμματιστές να κάνουν γρήγορα στυλ στοιχείων χωρίς να χρειάζεται να τα προσαρμόζουν χειροκίνητα κάθε φορά που υπάρχει αλλαγή.

πακέτο εξαρτημάτων με στυλ

Το Styled-components είναι ένα δημοφιλές πακέτο για το React Router που επιτρέπει στους προγραμματιστές να δημιουργούν και να διαχειρίζονται στυλ σε επίπεδο στοιχείου στις εφαρμογές τους React. Παρέχει έναν εύκολο τρόπο για να γράψετε κώδικα CSS που έχει εμβέλεια σε ένα μόνο στοιχείο, διευκολύνοντας τη συντήρηση και τον εντοπισμό σφαλμάτων. Τα Styled-Components διευκολύνουν επίσης την κοινή χρήση στυλ σε πολλά στοιχεία, καθώς και την υποστήριξη για τη δημιουργία θεμάτων. Επιπλέον, τα styled-components μπορούν να χρησιμοποιηθούν με το στοιχείο Link του React Router, επιτρέποντας στους προγραμματιστές να κάνουν στυλ συνδέσμων εντός της εφαρμογής τους.

Πώς να χρησιμοποιήσετε στατικά στυλ

Τα στατικά στυλ μπορούν να χρησιμοποιηθούν στο React Router χρησιμοποιώντας το χαρακτηριστικό inline style. Αυτό το χαρακτηριστικό σάς επιτρέπει να εφαρμόσετε ένα στυλ απευθείας σε ένα στοιχείο χωρίς να χρειάζεται ξεχωριστό φύλλο στυλ. Για να χρησιμοποιήσετε στατικά στυλ στο React Router, θα χρειαστεί να δημιουργήσετε ένα αντικείμενο στυλ και στη συνέχεια να το μεταφέρετε ως όρισμα στο στιλ του στοιχείου. Για παράδειγμα:

const myStyle = {
Χρώμα φόντου: '#f2f2f2',
Μέγεθος γραμματοσειράς: '20px',
χρώμα: '#000'
};