Hlavním problémem souvisejícím s React Routerem pomocí stylů z veřejné složky je to, že může být obtížné sledovat styly a ujistit se, že jsou správně aplikovány. Vzhledem k tomu, že veřejná složka není součástí stromu komponent React, může být obtížné zjistit, které styly a kdy jsou použity. Navíc pokud více součástí používá stejný styl z veřejné složky, může být obtížné ladit všechny problémy, které nastanou.
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 Reagovat z 'reagovat'; // Import knihovny React
2. import { BrowserRouter as Router, Route } z 'react-router-dom'; // Import komponent BrowserRouter a Route z knihovny respond-router-dom
3. import { createGlobalStyle } z 'styled-components'; // Import funkce createGlobalStyle z knihovny stylových komponent
4. importujte domovskou stránku z './pages/HomePage'; // Import komponenty HomePage
5. import AboutPage z './pages/AboutPage'; // Import komponenty AboutPage
6. const GlobalStyle = createGlobalStyle`…`; // Globální styly pro celou aplikaci. Toto bude aplikováno na všechny komponenty.
7. const App = () => (…); // Hlavní součást aplikace. Zde jsou definovány všechny trasy.
8.
9.
10 exportovat výchozí aplikaci;// Exportovat aplikaci jako výchozí
Používání stylů
Styly lze v React Routeru použít k přizpůsobení vzhledu a dojmu aplikace. Styly lze použít k vytváření vlastních komponent, přidávání animací a další. Styly lze také použít k vytvoření responzivních rozložení, která se přizpůsobí různým velikostem obrazovky. Kromě toho lze styly použít k vytvoření motivů pro aplikaci, které uživatelům umožňují přizpůsobit si své prostředí.
Použití veřejné složky
Veřejná složka v React Router je speciální složka, kterou lze použít k ukládání statických souborů, jako jsou obrázky, CSS a JavaScript. Tyto soubory jsou obsluhovány přímo z veřejné složky, aniž by byly zpracovávány aplikací React. To umožňuje rychlejší načítání a usnadňuje správu aktiv na více stránkách aplikace. Veřejná složka také poskytuje způsob, jak udržet určité soubory mimo systémy správy verzí, jako je Git, což může pomoci zachovat zabezpečení a soukromí.
Jak importuji soubor CSS z veřejné složky v React
V React Router můžete importovat soubor CSS z veřejné složky pomocí komponenty Link. Komponenta Link umožňuje zadat cestu k souboru v atributu href. Například:
Tím se importuje soubor styles.css z vaší veřejné složky do vaší aplikace React Router.