Rešeno: reaguje ruter koristeći stilove iz javne fascikle

Glavni problem vezan za React Router koji koristi stilove iz javne mape je taj što može biti teško pratiti stilove i osigurati da se pravilno primjenjuju. Budući da javna mapa nije dio React stabla komponenti, može biti teško znati koji se stilovi primjenjuju i kada. Osim toga, ako više komponenti koristi isti stil iz javne mape, može biti teško otkloniti sve probleme koji se pojave.

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. import React iz 'react'; // Uvoz React biblioteke
2. import { BrowserRouter as Router, Route } iz 'react-router-dom'; // Uvoz komponenti BrowserRouter i Route iz biblioteke react-router-dom
3. import { createGlobalStyle } iz 'styled-components'; // Uvoz funkcije createGlobalStyle iz biblioteke stilizovanih komponenti
4. uvezite početnu stranicu iz './pages/HomePage'; // Uvoz komponente HomePage
5. import AboutPage iz './pages/AboutPage'; // Uvoz komponente AboutPage
6. const GlobalStyle = createGlobalStyle`…`; // Globalni stilovi za cijelu aplikaciju. Ovo će se primijeniti na sve komponente.
7. const App = () => (…); // Glavna komponenta aplikacije. Ovdje su definirane sve rute.
8. ; // Definiranje rute s točnom putanjom od “/” koja prikazuje komponentu HomePage
9. ; // Definiranje rute s putanjom “/about” koja prikazuje komponentu AboutPage
10 izvoz podrazumevane aplikacije;// Izvoz aplikacije kao podrazumevane

Korištenje stilova

Stilovi se mogu koristiti u React Routeru za prilagođavanje izgleda i osjećaja aplikacije. Stilovi se mogu koristiti za kreiranje prilagođenih komponenti, dodavanje animacija i još mnogo toga. Stilovi se takođe mogu koristiti za kreiranje responzivnih izgleda koji se prilagođavaju različitim veličinama ekrana. Dodatno, stilovi se mogu koristiti za kreiranje tema za aplikaciju koje omogućavaju korisnicima da prilagode svoje iskustvo.

Korištenje javne mape

Javni folder u React Router-u je poseban folder koji se može koristiti za pohranjivanje statičkih datoteka kao što su slike, CSS i JavaScript. Ovi fajlovi se poslužuju direktno iz javne fascikle bez obrade od strane React aplikacije. Ovo omogućava kraće vrijeme učitavanja i olakšava upravljanje imovinom na više stranica aplikacije. Javni folder također pruža način da se određene datoteke drže izvan sistema kontrole verzija kao što je Git, što može pomoći u održavanju sigurnosti i privatnosti.

Kako da uvezem CSS fajl iz javnog foldera u React-u

U React Routeru možete uvesti CSS datoteku iz javne mape pomoću komponente Link. Komponenta Link vam omogućava da odredite putanju do datoteke u atributu href. Na primjer:

Ovo će uvesti datoteku styles.css iz vašeg javnog foldera u vašu React Router aplikaciju.

Slični postovi:

Ostavite komentar