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

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

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { createGlobalStyle } from 'styled-components';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
 
const GlobalStyle = createGlobalStyle` 
    body { 
        margin: 0; 

        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 
            "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 
            sans-serif;

        -webkit-font-smoothing: antialiased;

        -moz-osx-font-smoothing: grayscale;  

    }  

    code {  font-family: sourcecode pro, Menlo, Monaco, Consolas, Courier New, monospace; }  

    *{ boxsizing: borderbox;}  

    img{ maxwidth: 100%;}  

    a{ textdecoration : none;}     `; // Global styles for the entire app. This will be applied to all components. 
     const App = () => ( // The main component of the app. This is where all routes are defined.      <Router>       <div>         <GlobalStyle />          <Route exact path="/" component={HomePage} />          <Route path="/about" component={AboutPage} />       </div>     </Router> ); export default App;

1. εισαγωγή React από το 'react'. // Εισαγωγή της βιβλιοθήκης React
2. Εισαγάγετε το { BrowserRouter as Router, Route } από το 'react-router-dom'; // Εισαγωγή των στοιχείων BrowserRouter και Route από τη βιβλιοθήκη react-router-dom
3. εισαγωγή { createGlobalStyle } από το 'styled-components'. // Εισαγωγή της συνάρτησης createGlobalStyle από τη βιβλιοθήκη styled-components
4. Εισαγάγετε την αρχική σελίδα από το './pages/HomePage'. // Εισαγωγή του στοιχείου αρχικής σελίδας
5. Εισαγάγετε το AboutPage από το './pages/AboutPage'; // Εισαγωγή του στοιχείου AboutPage
6. const GlobalStyle = createGlobalStyle`…`; // Καθολικά στυλ για ολόκληρη την εφαρμογή. Αυτό θα εφαρμοστεί σε όλα τα εξαρτήματα.
7. const App = () => (…); // Το κύριο στοιχείο της εφαρμογής. Εδώ ορίζονται όλες οι διαδρομές.
8. ; // Καθορισμός διαδρομής με ακριβή διαδρομή "/" που αποδίδει το στοιχείο Αρχική Σελίδα
9. ; // Καθορισμός διαδρομής με διαδρομή "/about" που αποδίδει το στοιχείο AboutPage
10 εξαγωγή προεπιλεγμένης εφαρμογής;// Εξαγωγή εφαρμογής ως προεπιλογής

Χρήση στυλ

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

Χρήση του Δημόσιου Φακέλου

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

Πώς μπορώ να εισάγω ένα αρχείο CSS από δημόσιο φάκελο στο React

Στο React Router, μπορείτε να εισαγάγετε ένα αρχείο CSS από τον δημόσιο φάκελο χρησιμοποιώντας το στοιχείο Link. Το στοιχείο Link σάς επιτρέπει να καθορίσετε μια διαδρομή προς το αρχείο στο χαρακτηριστικό href. Για παράδειγμα:

Αυτό θα εισαγάγει το αρχείο styles.css από τον δημόσιο φάκελο στην εφαρμογή React Router.