Rezolvat: reacţionează routerul folosind stiluri din folderul public

Principala problemă legată de React Router folosind stiluri din folderul public este că poate fi dificil să ține evidența stilurilor și să te asiguri că sunt aplicate corect. Deoarece folderul public nu face parte din arborele componente React, poate fi greu de știut ce stiluri sunt aplicate și când. În plus, dacă mai multe componente folosesc același stil din folderul public, poate fi dificil să depanați problemele care apar.

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. import React din 'react'; // Importul bibliotecii React
2. import { BrowserRouter as Router, Route } din 'react-router-dom'; // Importul componentelor BrowserRouter și Route din biblioteca react-router-dom
3. import { createGlobalStyle } din 'stil-components'; // Importul funcției createGlobalStyle din biblioteca de componente cu stil
4. importa Pagina de pornire din „./pages/HomePage”; // Importul componentei Homepage
5. importați AboutPage din „./pages/AboutPage”; // Importul componentei AboutPage
6. const GlobalStyle = createGlobalStyle`…`; // Stiluri globale pentru întreaga aplicație. Aceasta se va aplica tuturor componentelor.
7. const App = () => (…); // Componenta principală a aplicației. Aici sunt definite toate rutele.
8. ; // Definirea unei rute cu o cale exactă a „/” care redă componenta Homepage
9. ; // Definirea unei rute cu o cale de „/about” care redă componenta AboutPage
10 exportați aplicația implicită;// Exportați aplicația ca implicită

Utilizarea stilurilor

Stilurile pot fi folosite în React Router pentru a personaliza aspectul aplicației. Stilurile pot fi folosite pentru a crea componente personalizate, pentru a adăuga animații și multe altele. Stilurile pot fi, de asemenea, folosite pentru a crea machete receptive care se adaptează la diferite dimensiuni de ecran. În plus, stilurile pot fi folosite pentru a crea teme pentru aplicație care permit utilizatorilor să-și personalizeze experiența.

Utilizarea folderului public

Dosarul public din React Router este un folder special care poate fi folosit pentru a stoca fișiere statice, cum ar fi imagini, CSS și JavaScript. Aceste fișiere sunt servite direct din folderul public fără a fi procesate de aplicația React. Acest lucru permite timpi de încărcare mai rapidi și facilitează gestionarea activelor pe mai multe pagini ale unei aplicații. Dosarul public oferă, de asemenea, o modalitate de a păstra anumite fișiere în afara sistemelor de control al versiunilor, cum ar fi Git, ceea ce poate ajuta la menținerea securității și confidențialității.

Cum import un fișier CSS din folderul public în React

În React Router, puteți importa un fișier CSS din folderul public utilizând componenta Link. Componenta Link vă permite să specificați o cale către fișier în atributul href. De exemplu:

Aceasta va importa fișierul styles.css din folderul public în aplicația React Router.