Vyriešené: reagujte na router pomocou štýlov z verejného priečinka

Hlavným problémom súvisiacim s React Routerom, ktorý používa štýly z verejného priečinka, je to, že môže byť ťažké sledovať štýly a uistiť sa, že sú aplikované správne. Keďže verejný priečinok nie je súčasťou stromu komponentov React, môže byť ťažké zistiť, ktoré štýly a kedy sa používajú. Okrem toho, ak viaceré súčasti používajú rovnaký štýl z verejného priečinka, môže byť ťažké ladiť akékoľvek problémy, ktoré sa vyskytnú.

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. importovať Reagovať z 'reagovať'; // Import knižnice React
2. importujte { BrowserRouter as Router, Route } z 'react-router-dom'; // Importovanie komponentov BrowserRouter a Route z knižnice respond-router-dom
3. import { createGlobalStyle } z 'styled-components'; // Import funkcie createGlobalStyle z knižnice styled-components
4. importujte domovskú stránku z './pages/HomePage'; // Import komponentu HomePage
5. importujte AboutPage z './pages/AboutPage'; // Import komponentu AboutPage
6. const GlobalStyle = createGlobalStyle`…`; // Globálne štýly pre celú aplikáciu. Toto bude aplikované na všetky komponenty.
7. const App = () => (…); // Hlavná súčasť aplikácie. Tu sú definované všetky trasy.
8. ; // Definovanie trasy s presnou cestou „/“, ktorá vykreslí komponent HomePage
9. ; // Definovanie trasy s cestou „/about“, ktorá vykreslí komponent AboutPage
10 exportovať predvolenú aplikáciu;// Exportovať aplikáciu ako predvolenú

Používanie štýlov

Štýly je možné použiť v React Router na prispôsobenie vzhľadu a prostredia aplikácie. Štýly možno použiť na vytváranie vlastných komponentov, pridávanie animácií a podobne. Štýly možno použiť aj na vytvorenie responzívnych rozložení, ktoré sa prispôsobia rôznym veľkostiam obrazovky. Okrem toho je možné použiť štýly na vytváranie tém pre aplikáciu, ktoré používateľom umožňujú prispôsobiť si svoje prostredie.

Používanie verejného priečinka

Verejný priečinok v React Router je špeciálny priečinok, ktorý možno použiť na ukladanie statických súborov, ako sú obrázky, CSS a JavaScript. Tieto súbory sú podávané priamo z verejného priečinka bez toho, aby boli spracované aplikáciou React. To umožňuje rýchlejšie načítanie a uľahčuje správu aktív na viacerých stránkach aplikácie. Verejný priečinok tiež poskytuje spôsob, ako udržať určité súbory mimo systémov správy verzií, ako je Git, čo môže pomôcť zachovať bezpečnosť a súkromie.

Ako importujem súbor CSS z verejného priečinka v React

V React Router môžete importovať súbor CSS z verejného priečinka pomocou komponentu Link. Komponent Link vám umožňuje zadať cestu k súboru v atribúte href. Napríklad:

Tým sa importuje súbor styles.css z vášho verejného priečinka do aplikácie React Router.