Riješeno: usmjerivač reagira koristeći stilove iz javne mape

Glavni problem povezan s React Routerom koji koristi stilove iz javne mape je taj što može biti teško pratiti stilove i provjeriti jesu li ispravno primijenjeni. Budući da javna mapa nije dio stabla komponente React, 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 bilo kakve 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 } from 'react-router-dom'; // Uvoz komponenti BrowserRouter i Route iz biblioteke react-router-dom
3. import { createGlobalStyle } iz 'styled-components'; // Uvoz funkcije createGlobalStyle iz biblioteke stiliziranih komponenti
4. uvoz početne stranice 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 “/” koja prikazuje komponentu HomePage
9. ; // Definiranje rute s putanjom “/about” koja prikazuje komponentu AboutPage
10 izvoz zadane aplikacije;// Izvoz aplikacije kao zadane

Korištenje stilova

Stilovi se mogu koristiti u React Routeru za prilagodbu izgleda i dojma aplikacije. Stilovi se mogu koristiti za stvaranje prilagođenih komponenti, dodavanje animacija i više. Stilovi se također mogu koristiti za izradu responzivnih izgleda koji se prilagođavaju različitim veličinama zaslona. Osim toga, stilovi se mogu koristiti za stvaranje tema za aplikaciju koje korisnicima omogućuju da prilagode svoje iskustvo.

Korištenje javne mape

Javna mapa u React Routeru je posebna mapa koja se može koristiti za pohranu statičkih datoteka kao što su slike, CSS i JavaScript. Ove se datoteke poslužuju izravno iz javne mape bez da ih obrađuje aplikacija React. To omogućuje brže vrijeme učitavanja i olakšava upravljanje imovinom na više stranica aplikacije. Javna mapa također pruža način da se određene datoteke zadrže izvan sustava kontrole verzija kao što je Git, što može pomoći u održavanju sigurnosti i privatnosti.

Kako mogu uvesti CSS datoteku iz javne mape u React

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

Ovo će uvesti datoteku styles.css iz vaše javne mape u vašu aplikaciju React Router.

Povezani postovi:

Ostavite komentar