Pagrindinė problema, susijusi su React Router naudojant stilius iš viešojo aplanko, yra ta, kad gali būti sunku sekti stilius ir užtikrinti, kad jie tinkamai pritaikyti. Kadangi viešasis aplankas nėra React komponentų medžio dalis, gali būti sunku žinoti, kurie stiliai taikomi ir kada. Be to, jei keli komponentai naudoja tą patį stilių iš viešojo aplanko, gali būti sunku derinti bet kokias iškilusias problemas.
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. importuoti React iš 'react'; // React bibliotekos importavimas
2. importuoti { BrowserRouter as Router, Route } iš 'react-router-dom'; // BrowserRouter ir Route komponentų importavimas iš react-router-dom bibliotekos
3. importuoti { createGlobalStyle } iš 'styled-components'; // Funkcijos createGlobalStyle importavimas iš stiliaus komponentų bibliotekos
4. importuoti pagrindinį puslapį iš './pages/HomePage'; // Pagrindinio puslapio komponento importavimas
5. importuoti AboutPage iš './pages/AboutPage'; // Importuojamas „AboutPage“ komponentas
6. const GlobalStyle = createGlobalStyle`…`; // Visuotiniai visos programos stiliai. Tai bus taikoma visiems komponentams.
7. const App = () => (…); // Pagrindinis programos komponentas. Čia apibrėžiami visi maršrutai.
8.
9.
10 eksportuoti numatytąją programą;// Eksportuojama programa kaip numatytoji
Stilių naudojimas
Stilius galima naudoti React Router, kad būtų galima pritaikyti programos išvaizdą. Stilius galima naudoti kuriant pasirinktinius komponentus, pridėti animaciją ir kt. Stilius taip pat galima naudoti kuriant jautrius išdėstymus, kurie prisitaiko prie skirtingų ekrano dydžių. Be to, stiliai gali būti naudojami kuriant programos temas, leidžiančias vartotojams tinkinti savo patirtį.
Viešojo aplanko naudojimas
Viešasis „React Router“ aplankas yra specialus aplankas, kuriame galima saugoti statinius failus, tokius kaip vaizdai, CSS ir „JavaScript“. Šie failai pateikiami tiesiogiai iš viešojo aplanko, jų neapdoroja programa „React“. Tai leidžia greičiau įkelti ir lengviau valdyti išteklius keliuose programos puslapiuose. Viešasis aplankas taip pat suteikia galimybę tam tikriems failams patekti į versijų valdymo sistemas, tokias kaip „Git“, o tai gali padėti išlaikyti saugumą ir privatumą.
Kaip importuoti CSS failą iš viešojo „React“ aplanko
„React Router“ galite importuoti CSS failą iš viešojo aplanko naudodami „Link“ komponentą. Komponentas Nuoroda leidžia nurodyti kelią į failą atribute href. Pavyzdžiui:
Failas styles.css bus importuotas iš viešojo aplanko į programą „React Router“.