Löst: reagera routern med hjälp av stilar från den offentliga mappen

Det största problemet med att React Router använder stilar från den offentliga mappen är att det kan vara svårt att hålla reda på stilarna och se till att de tillämpas korrekt. Eftersom den offentliga mappen inte är en del av React-komponentträdet kan det vara svårt att veta vilka stilar som används och när. Dessutom, om flera komponenter använder samma stil från den offentliga mappen, kan det vara svårt att felsöka eventuella problem som uppstå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. importera Reagera från 'react'; // Importera React-biblioteket
2. importera { BrowserRouter som router, rutt } från 'react-router-dom'; // Importera BrowserRouter- och Route-komponenterna från react-router-dom-biblioteket
3. importera { createGlobalStyle } från 'styled-components'; // Importera createGlobalStyle-funktionen från biblioteket med formaterade komponenter
4. importera Hemsida från './pages/Hemsida'; // Importera HomePage-komponenten
5. importera AboutPage från './pages/AboutPage'; // Importera AboutPage-komponenten
6. const GlobalStyle = createGlobalStyle`…`; // Globala stilar för hela appen. Detta kommer att tillämpas på alla komponenter.
7. const App = () => (…); // Huvudkomponenten i appen. Det är här alla rutter definieras.
8. ; // Definiera en rutt med en exakt sökväg för "/" som återger HomePage-komponenten
9. ; // Definiera en rutt med sökvägen "/about" som återger AboutPage-komponenten
10 exportera standardapp;// Exportera app som standard

Använda stilar

Stilar kan användas i React Router för att anpassa utseendet och känslan av applikationen. Stilar kan användas för att skapa anpassade komponenter, lägga till animationer och mer. Stilar kan också användas för att skapa responsiva layouter som anpassar sig till olika skärmstorlekar. Dessutom kan stilar användas för att skapa teman för applikationen som tillåter användare att anpassa sin upplevelse.

Använda den allmänna mappen

Den offentliga mappen i React Router är en speciell mapp som kan användas för att lagra statiska filer som bilder, CSS och JavaScript. Dessa filer serveras direkt från den offentliga mappen utan att bearbetas av React-applikationen. Detta möjliggör snabbare laddningstider och gör det lättare att hantera tillgångar över flera sidor i en applikation. Den offentliga mappen ger också ett sätt att hålla vissa filer borta från versionskontrollsystem som Git, vilket kan hjälpa till att upprätthålla säkerhet och integritet.

Hur importerar jag en CSS-fil från den offentliga mappen i React

I React Router kan du importera en CSS-fil från den offentliga mappen genom att använda länkkomponenten. Länkkomponenten låter dig ange en sökväg till filen i href-attributet. Till exempel:

Detta kommer att importera filen styles.css från din offentliga mapp till din React Router-applikation.