Résolu : réagissez au routeur en utilisant les styles du dossier public

Le principal problème lié à React Router utilisant les styles du dossier public est qu'il peut être difficile de suivre les styles et de s'assurer qu'ils sont appliqués correctement. Étant donné que le dossier public ne fait pas partie de l'arborescence des composants React, il peut être difficile de savoir quels styles sont appliqués et quand. De plus, si plusieurs composants utilisent le même style à partir du dossier public, il peut être difficile de déboguer les problèmes qui surviennent.

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. importer React depuis 'react' ; // Importation de la bibliothèque React
2. importez { BrowserRouter as Router, Route } from 'react-router-dom' ; // Importation des composants BrowserRouter et Route depuis la bibliothèque react-router-dom
3. importez { createGlobalStyle } à partir de 'styled-components' ; // Importation de la fonction createGlobalStyle depuis la bibliothèque styled-components
4. importer la page d'accueil à partir de './pages/page d'accueil' ; // Importation du composant HomePage
5. importez AboutPage depuis './pages/AboutPage' ; // Importation du composant AboutPage
6. const GlobalStyle = createGlobalStyle`…`; // Styles globaux pour toute l'application. Cela sera appliqué à tous les composants.
7. const App = () => (…) ; // Le composant principal de l'application. C'est là que tous les itinéraires sont définis.
8. ; // Définition d'une route avec un chemin exact de "/" qui rend le composant HomePage
9. ; // Définition d'une route avec un chemin de "/about" qui rend le composant AboutPage
10 exporter l'application par défaut ; // Exporter l'application par défaut

Utilisation des styles

Les styles peuvent être utilisés dans React Router pour personnaliser l'apparence de l'application. Les styles peuvent être utilisés pour créer des composants personnalisés, ajouter des animations, etc. Les styles peuvent également être utilisés pour créer des mises en page réactives qui s'adaptent à différentes tailles d'écran. De plus, les styles peuvent être utilisés pour créer des thèmes pour l'application qui permettent aux utilisateurs de personnaliser leur expérience.

Utilisation du dossier public

Le dossier public de React Router est un dossier spécial qui peut être utilisé pour stocker des fichiers statiques tels que des images, CSS et JavaScript. Ces fichiers sont servis directement à partir du dossier public sans être traités par l'application React. Cela permet des temps de chargement plus rapides et facilite la gestion des actifs sur plusieurs pages d'une application. Le dossier public fournit également un moyen de garder certains fichiers hors des systèmes de contrôle de version comme Git, ce qui peut aider à maintenir la sécurité et la confidentialité.

Comment importer un fichier CSS à partir d'un dossier public dans React

Dans React Router, vous pouvez importer un fichier CSS à partir du dossier public à l'aide du composant Link. Le composant Link vous permet de spécifier un chemin vers le fichier dans l'attribut href. Par example:

Cela importera le fichier styles.css de votre dossier public dans votre application React Router.