Vyřešeno: reagovat na router pomocí stylů z veřejné složky

Poslední aktualizace: 09/11/2023
Autor: JavaScript SourceTrail

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. ; // Definování trasy s přesnou cestou „/“, která vykreslí komponentu HomePage
9. ; // Definování cesty s cestou „/about“, která vykreslí komponentu AboutPage
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.

Související příspěvky: