Opgelost: reageer router met behulp van stijlen uit de openbare map

Het grootste probleem met betrekking tot het gebruik van stijlen uit de openbare map van React Router is dat het moeilijk kan zijn om de stijlen bij te houden en ervoor te zorgen dat ze correct worden toegepast. Aangezien de openbare map geen deel uitmaakt van de React-componentenboom, kan het moeilijk zijn om te weten welke stijlen worden toegepast en wanneer. Bovendien, als meerdere componenten dezelfde stijl uit de openbare map gebruiken, kan het moeilijk zijn om eventuele problemen op te lossen.

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. importeer Reageren uit 'reageren'; // De React-bibliotheek importeren
2. importeer { BrowserRouter als router, route } uit 'react-router-dom'; // De componenten BrowserRouter en Route importeren uit de bibliotheek react-router-dom
3. importeer { createGlobalStyle } uit 'styled-components'; // De functie createGlobalStyle importeren uit de bibliotheek met gestileerde componenten
4. HomePage importeren vanuit './pages/HomePage'; // De HomePage-component importeren
5. importeer AboutPage uit './pages/AboutPage'; // Importeren van de AboutPage-component
6. const GlobalStyle = createGlobalStyle`...`; // Globale stijlen voor de hele app. Dit wordt op alle onderdelen toegepast.
7. const App = () => (...); // Het belangrijkste onderdeel van de app. Hier worden alle routes gedefinieerd.
8. ; // Een route definiëren met een exact pad van "/" dat de HomePage-component weergeeft
9. ; // Een route definiëren met een pad van "/about" dat de AboutPage-component weergeeft
10 export standaard App;// App exporteren als standaard

Stijlen gebruiken

Stijlen kunnen in React Router worden gebruikt om het uiterlijk van de toepassing aan te passen. Stijlen kunnen worden gebruikt om aangepaste componenten te maken, animaties toe te voegen en meer. Stijlen kunnen ook worden gebruikt om responsieve lay-outs te maken die zich aanpassen aan verschillende schermformaten. Bovendien kunnen stijlen worden gebruikt om thema's voor de toepassing te maken waarmee gebruikers hun ervaring kunnen aanpassen.

De openbare map gebruiken

De openbare map in React Router is een speciale map die kan worden gebruikt om statische bestanden zoals afbeeldingen, CSS en JavaScript op te slaan. Deze bestanden worden rechtstreeks vanuit de openbare map geserveerd zonder te worden verwerkt door de React-applicatie. Dit zorgt voor snellere laadtijden en maakt het gemakkelijker om activa op meerdere pagina's van een applicatie te beheren. De openbare map biedt ook een manier om bepaalde bestanden buiten versiebeheersystemen zoals Git te houden, wat kan helpen de beveiliging en privacy te behouden.

Hoe importeer ik een CSS-bestand uit de openbare map in React

In React Router kunt u een CSS-bestand uit de openbare map importeren met behulp van de Link-component. Met de Link-component kunt u een pad naar het bestand specificeren in het href-attribuut. Bijvoorbeeld:

Hiermee importeert u het bestand styles.css uit uw openbare map in uw React Router-toepassing.