Risolto: reagisce al router usando gli stili dalla cartella pubblica

Il problema principale relativo a React Router che utilizza gli stili dalla cartella pubblica è che può essere difficile tenere traccia degli stili e assicurarsi che vengano applicati correttamente. Poiché la cartella pubblica non fa parte dell'albero dei componenti di React, può essere difficile sapere quali stili vengono applicati e quando. Inoltre, se più componenti utilizzano lo stesso stile dalla cartella pubblica, può essere difficile eseguire il debug di eventuali problemi che si verificano.

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. importa React da 'react'; // Importazione della libreria React
2. import { BrowserRouter as Router, Route } da 'react-router-dom'; // Importazione dei componenti BrowserRouter e Route dalla libreria react-router-dom
3. import { createGlobalStyle } da 'componenti in stile'; // Importazione della funzione createGlobalStyle dalla libreria dei componenti di stile
4. importa la HomePage da './pages/HomePage'; // Importazione del componente HomePage
5. importa AboutPage da './pages/AboutPage'; // Importazione del componente AboutPage
6. const GlobalStyle = createGlobalStyle`…`; // Stili globali per l'intera app. Questo verrà applicato a tutti i componenti.
7. const App = () => (…); // Il componente principale dell'app. Qui è dove vengono definiti tutti i percorsi.
8. ; // Definizione di un percorso con un percorso esatto di "/" che esegue il rendering del componente HomePage
9. ; // Definizione di un percorso con un percorso di "/about" che esegue il rendering del componente AboutPage
10 esporta l'app predefinita;// Esporta l'app come predefinita

Uso degli stili

Gli stili possono essere utilizzati in React Router per personalizzare l'aspetto dell'applicazione. Gli stili possono essere utilizzati per creare componenti personalizzati, aggiungere animazioni e altro ancora. Gli stili possono anche essere utilizzati per creare layout reattivi che si adattano alle diverse dimensioni dello schermo. Inoltre, gli stili possono essere utilizzati per creare temi per l'applicazione che consentono agli utenti di personalizzare la propria esperienza.

Utilizzo della cartella pubblica

La cartella pubblica in React Router è una cartella speciale che può essere utilizzata per archiviare file statici come immagini, CSS e JavaScript. Questi file vengono serviti direttamente dalla cartella pubblica senza essere elaborati dall'applicazione React. Ciò consente tempi di caricamento più rapidi e semplifica la gestione delle risorse su più pagine di un'applicazione. La cartella pubblica fornisce anche un modo per mantenere determinati file fuori dai sistemi di controllo della versione come Git, che possono aiutare a mantenere la sicurezza e la privacy.

Come importare un file CSS dalla cartella pubblica in React

In React Router, puoi importare un file CSS dalla cartella pubblica utilizzando il componente Link. Il componente Link consente di specificare un percorso al file nell'attributo href. Per esempio:

Questo importerà il file styles.css dalla tua cartella pubblica nella tua applicazione React Router.