Løst: reager ruteren ved å bruke stiler fra den offentlige mappen

Hovedproblemet knyttet til at React Router bruker stiler fra den offentlige mappen er at det kan være vanskelig å holde styr på stilene og sørge for at de brukes riktig. Siden den offentlige mappen ikke er en del av React-komponenttreet, kan det være vanskelig å vite hvilke stiler som brukes og når. I tillegg, hvis flere komponenter bruker samme stil fra den offentlige mappen, kan det være vanskelig å feilsøke eventuelle problemer som oppstå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'; // Importerer React-biblioteket
2. importer { BrowserRouter som ruter, rute } fra 'react-router-dom'; // Importere BrowserRouter- og Route-komponentene fra react-router-dom-biblioteket
3. importer { createGlobalStyle } fra 'styled-components'; // Importere createGlobalStyle-funksjonen fra styled-components-biblioteket
4. importer HomePage fra './pages/HomePage'; // Importerer HomePage-komponenten
5. importer AboutPage fra './pages/AboutPage'; // Importere AboutPage-komponenten
6. const GlobalStyle = createGlobalStyle`...`; // Globale stiler for hele appen. Dette vil bli brukt på alle komponenter.
7. const App = () => (…); // Hovedkomponenten i appen. Det er her alle ruter er definert.
8. ; // Definere en rute med en nøyaktig bane til "/" som gjengir HomePage-komponenten
9. ; // Definere en rute med en bane "/about" som gjengir AboutPage-komponenten
10 eksporter standardapp;// Eksporterer app som standard

Bruke stiler

Stiler kan brukes i React Router for å tilpasse utseendet og følelsen til applikasjonen. Stiler kan brukes til å lage tilpassede komponenter, legge til animasjoner og mer. Stiler kan også brukes til å lage responsive layouter som tilpasser seg ulike skjermstørrelser. I tillegg kan stiler brukes til å lage temaer for applikasjonen som lar brukere tilpasse opplevelsen sin.

Bruke den offentlige mappen

Den offentlige mappen i React Router er en spesiell mappe som kan brukes til å lagre statiske filer som bilder, CSS og JavaScript. Disse filene serveres direkte fra den offentlige mappen uten å bli behandlet av React-applikasjonen. Dette gir raskere innlastingstider og gjør det enklere å administrere eiendeler på tvers av flere sider i en applikasjon. Den offentlige mappen gir også en måte å holde visse filer utenfor versjonskontrollsystemer som Git, noe som kan bidra til å opprettholde sikkerhet og personvern.

Hvordan importerer jeg en CSS-fil fra offentlig mappe i React

I React Router kan du importere en CSS-fil fra den offentlige mappen ved å bruke Link-komponenten. Link-komponenten lar deg spesifisere en bane til filen i href-attributtet. For eksempel:

Dette vil importere styles.css-filen fra den offentlige mappen til React Router-applikasjonen.