Gelöst: Router mit Stilen aus dem öffentlichen Ordner reagieren

Das Hauptproblem im Zusammenhang mit React Router bei der Verwendung von Stilen aus dem öffentlichen Ordner besteht darin, dass es schwierig sein kann, die Stile im Auge zu behalten und sicherzustellen, dass sie korrekt angewendet werden. Da der öffentliche Ordner nicht Teil des React-Komponentenbaums ist, kann es schwierig sein zu wissen, welche Stile wann angewendet werden. Wenn außerdem mehrere Komponenten denselben Stil aus dem öffentlichen Ordner verwenden, kann es schwierig sein, auftretende Probleme zu debuggen.

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. importiere React aus 'react'; // Importieren der React-Bibliothek
2. importiere { BrowserRouter als Router, Route } aus 'react-router-dom'; // Importieren der BrowserRouter- und Route-Komponenten aus der React-Router-Dom-Bibliothek
3. importiere { createGlobalStyle } aus 'styled-components'; // Importieren der createGlobalStyle-Funktion aus der styled-components-Bibliothek
4. Homepage aus './pages/HomePage' importieren; // Importieren der HomePage-Komponente
5. importiere AboutPage aus './pages/AboutPage'; // Importieren der AboutPage-Komponente
6. const GlobalStyle = createGlobalStyle`…`; // Globale Stile für die gesamte App. Dies wird auf alle Komponenten angewendet.
7. const App = () => (…); // Die Hauptkomponente der App. Hier werden alle Routen definiert.
8. ; // Definieren einer Route mit einem genauen Pfad von „/“, der die HomePage-Komponente rendert
9. ; // Definieren einer Route mit einem Pfad von „/about“, der die AboutPage-Komponente rendert
10 Standard-App exportieren;// App als Standard exportieren

Verwenden von Stilen

Stile können in React Router verwendet werden, um das Erscheinungsbild der Anwendung anzupassen. Stile können verwendet werden, um benutzerdefinierte Komponenten zu erstellen, Animationen hinzuzufügen und vieles mehr. Stile können auch verwendet werden, um ansprechende Layouts zu erstellen, die sich an verschiedene Bildschirmgrößen anpassen. Darüber hinaus können Stile verwendet werden, um Themen für die Anwendung zu erstellen, mit denen Benutzer ihre Erfahrung anpassen können.

Verwenden des öffentlichen Ordners

Der öffentliche Ordner in React Router ist ein spezieller Ordner, der zum Speichern statischer Dateien wie Bilder, CSS und JavaScript verwendet werden kann. Diese Dateien werden direkt aus dem öffentlichen Ordner bereitgestellt, ohne von der React-Anwendung verarbeitet zu werden. Dies ermöglicht schnellere Ladezeiten und erleichtert die Verwaltung von Assets über mehrere Seiten einer Anwendung hinweg. Der öffentliche Ordner bietet auch eine Möglichkeit, bestimmte Dateien von Versionskontrollsystemen wie Git fernzuhalten, was zur Wahrung der Sicherheit und des Datenschutzes beitragen kann.

Wie importiere ich eine CSS-Datei aus einem öffentlichen Ordner in React

In React Router können Sie eine CSS-Datei aus dem öffentlichen Ordner importieren, indem Sie die Link-Komponente verwenden. Die Link-Komponente ermöglicht es Ihnen, einen Pfad zu der Datei im href-Attribut anzugeben. Zum Beispiel:

Dadurch wird die Datei styles.css aus Ihrem öffentlichen Ordner in Ihre React Router-Anwendung importiert.