Løst: Reager router ved hjælp af stilarter fra den offentlige mappe

Hovedproblemet i forbindelse med React Router ved at bruge stilarter fra den offentlige mappe er, at det kan være svært at holde styr på stilene og sørge for, at de anvendes korrekt. Da den offentlige mappe ikke er en del af React-komponenttræet, kan det være svært at vide, hvilke stilarter der anvendes, og hvornår. Derudover, hvis flere komponenter bruger den samme stil fra den offentlige mappe, kan det være svært at fejlsøge eventuelle problemer, der opstår.

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. importere Reager fra 'reager'; // Import af React-biblioteket
2. importer { BrowserRouter som router, rute } fra 'react-router-dom'; // Import af BrowserRouter og Route komponenter fra react-router-dom biblioteket
3. importer { createGlobalStyle } fra 'styled-components'; // Import af createGlobalStyle-funktionen fra biblioteket med stylede komponenter
4. importer HomePage fra './pages/HomePage'; // Import af HomePage-komponenten
5. importer AboutPage fra './pages/AboutPage'; // Import af AboutPage-komponenten
6. const GlobalStyle = createGlobalStyle`...`; // Globale stilarter for hele appen. Dette vil blive anvendt på alle komponenter.
7. const App = () => (…); // Hovedkomponenten i appen. Det er her alle ruter er defineret.
8. ; // Definering af en rute med en nøjagtig sti på "/", der gengiver HomePage-komponenten
9. ; // Definering af en rute med stien "/about", der gengiver AboutPage-komponenten
10 eksporter standardapp;// Eksporterer app som standard

Brug af stilarter

Styles kan bruges i React Router for at tilpasse udseendet og følelsen af ​​applikationen. Styles kan bruges til at oprette brugerdefinerede komponenter, tilføje animationer og mere. Styles kan også bruges til at skabe responsive layouts, der tilpasser sig forskellige skærmstørrelser. Derudover kan stilarter bruges til at skabe temaer til applikationen, der giver brugerne mulighed for at tilpasse deres oplevelse.

Brug af den offentlige mappe

Den offentlige mappe i React Router er en speciel mappe, der kan bruges til at gemme statiske filer såsom billeder, CSS og JavaScript. Disse filer serveres direkte fra den offentlige mappe uden at blive behandlet af React-applikationen. Dette giver mulighed for hurtigere indlæsningstider og gør det nemmere at administrere aktiver på tværs af flere sider i en applikation. Den offentlige mappe giver også en måde at holde visse filer ude af versionskontrolsystemer som Git, hvilket kan hjælpe med at opretholde sikkerhed og privatliv.

Hvordan importerer jeg en CSS-fil fra den offentlige mappe i React

I React Router kan du importere en CSS-fil fra den offentlige mappe ved at bruge Link-komponenten. Link-komponenten giver dig mulighed for at angive en sti til filen i href-attributten. For eksempel:

Dette vil importere styles.css-filen fra din offentlige mappe til din React Router-applikation.