Solucionat: reacciona l'encaminador utilitzant estils de la carpeta pública

El principal problema relacionat amb React Router utilitzant estils de la carpeta pública és que pot ser difícil fer un seguiment dels estils i assegurar-se que s'apliquen correctament. Com que la carpeta pública no forma part de l'arbre de components de React, pot ser difícil saber quins estils s'apliquen i quan. A més, si diversos components utilitzen el mateix estil de la carpeta pública, pot ser difícil depurar qualsevol problema que sorgeixi.

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. importar React des de "reaccionar"; // Importació de la biblioteca React
2. importa { BrowserRouter com a encaminador, ruta } des de 'react-router-dom'; // Importació dels components BrowserRouter i Route des de la biblioteca react-router-dom
3. importar { createGlobalStyle } des de 'components d'estil'; // Importació de la funció createGlobalStyle de la biblioteca de components d'estil
4. importa la pàgina d'inici des de './pages/HomePage'; // Importació del component HomePage
5. importar AboutPage de './pages/AboutPage'; // Importació del component AboutPage
6. const GlobalStyle = createGlobalStyle`…`; // Estils globals per a tota l'aplicació. Això s'aplicarà a tots els components.
7. const App = () => (…); // El component principal de l'aplicació. Aquí és on es defineixen totes les rutes.
8. ; // Definint una ruta amb una ruta exacta de "/" que representa el component de la pàgina d'inici
9. ; // Definint una ruta amb un camí de "/about" que representa el component AboutPage
10 exporta l'aplicació predeterminada;// Exporta l'aplicació per defecte

Ús d'estils

Els estils es poden utilitzar a React Router per personalitzar l'aspecte de l'aplicació. Els estils es poden utilitzar per crear components personalitzats, afegir animacions i molt més. Els estils també es poden utilitzar per crear dissenys responsius que s'adaptin a diferents mides de pantalla. A més, es poden utilitzar estils per crear temes per a l'aplicació que permetin als usuaris personalitzar la seva experiència.

Ús de la carpeta pública

La carpeta pública de React Router és una carpeta especial que es pot utilitzar per emmagatzemar fitxers estàtics com ara imatges, CSS i JavaScript. Aquests fitxers es serveixen directament des de la carpeta pública sense ser processats per l'aplicació React. Això permet temps de càrrega més ràpids i facilita la gestió dels actius en diverses pàgines d'una aplicació. La carpeta pública també ofereix una manera de mantenir determinats fitxers fora dels sistemes de control de versions com Git, que pot ajudar a mantenir la seguretat i la privadesa.

Com importo un fitxer CSS de la carpeta pública a React

A React Router, podeu importar un fitxer CSS de la carpeta pública mitjançant el component Enllaç. El component Enllaç us permet especificar una ruta al fitxer a l'atribut href. Per exemple:

Això importarà el fitxer styles.css de la vostra carpeta pública a l'aplicació React Router.