Resuelto: reaccionar enrutador usando estilos de la carpeta pública

El principal problema relacionado con React Router que usa estilos de la carpeta pública es que puede ser difícil hacer un seguimiento de los estilos y asegurarse de que se apliquen correctamente. Dado que la carpeta pública no forma parte del árbol de componentes de React, puede ser difícil saber qué estilos se están aplicando y cuándo. Además, si varios componentes usan el mismo estilo de la carpeta pública, puede ser difícil depurar cualquier problema que surja.

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 desde 'react'; // Importando la biblioteca React
2. importar {BrowserRouter as Router, Route} desde 'react-router-dom'; // Importación de los componentes BrowserRouter y Route de la biblioteca react-router-dom
3. importar { createGlobalStyle } desde 'componentes con estilo'; // Importación de la función createGlobalStyle de la biblioteca de componentes con estilo
4. importar la página de inicio desde './pages/HomePage'; // Importando el componente HomePage
5. importar AboutPage desde './pages/AboutPage'; // Importando el componente AboutPage
6. const GlobalStyle = createGlobalStyle`…`; // Estilos globales para toda la aplicación. Esto se aplicará a todos los componentes.
7. const App = () => (…); // El componente principal de la aplicación. Aquí es donde se definen todas las rutas.
8. ; // Definición de una ruta con una ruta exacta de "/" que representa el componente HomePage
9. ; // Definición de una ruta con una ruta de "/ acerca de" que representa el componente AboutPage
10 exportar la aplicación predeterminada;// exportar la aplicación como predeterminada

Usando estilos

Los estilos se pueden usar en React Router para personalizar la apariencia de la aplicación. Los estilos se pueden usar para crear componentes personalizados, agregar animaciones y más. Los estilos también se pueden usar para crear diseños receptivos que se adaptan a diferentes tamaños de pantalla. Además, los estilos se pueden usar para crear temas para la aplicación que permitan a los usuarios personalizar su experiencia.

Uso de la carpeta pública

La carpeta pública en React Router es una carpeta especial que se puede usar para almacenar archivos estáticos como imágenes, CSS y JavaScript. Estos archivos se sirven directamente desde la carpeta pública sin que la aplicación React los procese. Esto permite tiempos de carga más rápidos y facilita la administración de activos en varias páginas de una aplicación. La carpeta pública también proporciona una forma de mantener ciertos archivos fuera de los sistemas de control de versiones como Git, lo que puede ayudar a mantener la seguridad y la privacidad.

¿Cómo importo un archivo CSS desde una carpeta pública en React?

En React Router, puede importar un archivo CSS desde la carpeta pública utilizando el componente Link. El componente Enlace le permite especificar una ruta al archivo en el atributo href. Por ejemplo:

Esto importará el archivo styles.css de su carpeta pública a su aplicación React Router.