Megoldva: reagáljon a routerre a nyilvános mappából származó stílusok használatával

A nyilvános mappából származó stílusokat használó React Routerrel kapcsolatos fő probléma az, hogy nehéz lehet nyomon követni a stílusokat, és megbizonyosodni arról, hogy helyesen alkalmazzák őket. Mivel a nyilvános mappa nem része a React összetevőfának, nehéz lehet tudni, hogy mely stílusok kerülnek alkalmazásra és mikor. Ezenkívül, ha több összetevő ugyanazt a stílust használja a nyilvános mappából, nehéz lehet a felmerülő problémák hibakeresése.

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. React importálása a 'react'-ból; // A React könyvtár importálása
2. import { BrowserRouter as Router, Route } innen: 'react-router-dom'; // A BrowserRouter és Route összetevők importálása a react-router-dom könyvtárból
3. importáljon { createGlobalStyle }-t a "styled-components"-ból; // A createGlobalStyle függvény importálása a styled-components könyvtárból
4. importálja a kezdőlapot a './pages/HomePage' oldalról; // A HomePage összetevő importálása
5. importálja az AboutPage oldalt a './pages/AboutPage' oldalról; // Az AboutPage összetevő importálása
6. const GlobalStyle = CreateGlobalStyle`…`; // Globális stílusok a teljes alkalmazáshoz. Ez az összes összetevőre vonatkozik.
7. const App = () => (…); // Az alkalmazás fő összetevője. Itt van meghatározva minden útvonal.
8. ; // Útvonal meghatározása a „/” pontos elérési úttal, amely megjeleníti a HomePage komponenst
9. ; // Útvonal meghatározása „/about” útvonallal, amely az AboutPage összetevőt jeleníti meg
10 alapértelmezett alkalmazás exportálása;// Alkalmazás exportálása alapértelmezettként

Stílusok használata

A stílusok a React Routerben használhatók az alkalmazás megjelenésének testreszabásához. A stílusok segítségével egyéni összetevőket hozhat létre, animációkat adhat hozzá stb. A stílusok felhasználhatók olyan érzékeny elrendezések létrehozására is, amelyek alkalmazkodnak a különböző képernyőméretekhez. Ezenkívül stílusok használhatók olyan témák létrehozására az alkalmazás számára, amelyek lehetővé teszik a felhasználók számára, hogy személyre szabják élményüket.

A nyilvános mappa használata

A React Router nyilvános mappája egy speciális mappa, amely statikus fájlok, például képek, CSS és JavaScript tárolására használható. Ezek a fájlok közvetlenül a nyilvános mappából kerülnek kiszolgálásra, anélkül, hogy a React alkalmazás feldolgozná őket. Ez gyorsabb betöltési időt tesz lehetővé, és megkönnyíti az eszközök kezelését egy alkalmazás több oldalán. A nyilvános mappa arra is lehetőséget biztosít, hogy bizonyos fájlokat távol tartsanak a verziókezelő rendszerektől, például a Gittől, ami segíthet fenntartani a biztonságot és az adatvédelmet.

Hogyan importálhatok CSS-fájlt a React nyilvános mappájából

A React Routerben a Link összetevő használatával importálhat egy CSS-fájlt a nyilvános mappából. A Link összetevő lehetővé teszi a fájl elérési útjának megadását a href attribútumban. Például:

Ezzel importálja a styles.css fájlt a nyilvános mappából a React Router alkalmazásba.

Kapcsolódó hozzászólások:

Írj hozzászólást