Rešeno: reagirajte na usmerjevalnik z uporabo slogov iz javne mape

Glavna težava, povezana z React Routerjem, ki uporablja sloge iz javne mape, je, da je lahko težko slediti slogom in zagotoviti, da so pravilno uporabljeni. Ker javna mapa ni del drevesa komponent React, je težko vedeti, kateri slogi so uporabljeni in kdaj. Poleg tega, če več komponent uporablja isti slog iz javne mape, je lahko težko odpraviti napake, ki se pojavijo.

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. uvozi React iz 'react'; // Uvoz knjižnice React
2. uvozi { BrowserRouter kot usmerjevalnik, Route } iz 'react-router-dom'; // Uvoz komponent BrowserRouter in Route iz knjižnice react-router-dom
3. uvozi { createGlobalStyle } iz 'styled-components'; // Uvoz funkcije createGlobalStyle iz knjižnice stiliziranih komponent
4. uvozite domačo stran iz './pages/HomePage'; // Uvoz komponente HomePage
5. uvozite AboutPage iz './pages/AboutPage'; // Uvoz komponente AboutPage
6. const GlobalStyle = createGlobalStyle`…`; // Globalni slogi za celotno aplikacijo. To bo veljalo za vse komponente.
7. const App = () => (…); // Glavna komponenta aplikacije. Tu so definirane vse poti.
8. ; // Definiranje poti z natančno potjo »/«, ki upodobi komponento HomePage
9. ; // Definiranje poti s potjo “/about”, ki upodobi komponento AboutPage
10 izvoz privzete aplikacije;// Izvoz aplikacije kot privzete

Uporaba slogov

Sloge je mogoče uporabiti v React Routerju za prilagoditev videza in občutka aplikacije. S slogi je mogoče ustvariti komponente po meri, dodati animacije in drugo. Sloge je mogoče uporabiti tudi za ustvarjanje odzivnih postavitev, ki se prilagajajo različnim velikostim zaslona. Poleg tega je mogoče sloge uporabiti za ustvarjanje tem za aplikacijo, ki uporabnikom omogočajo prilagajanje njihove izkušnje.

Uporaba javne mape

Javna mapa v React Routerju je posebna mapa, ki se lahko uporablja za shranjevanje statičnih datotek, kot so slike, CSS in JavaScript. Te datoteke so vročene neposredno iz javne mape, ne da bi jih obdelala aplikacija React. To omogoča hitrejše nalaganje in olajša upravljanje sredstev na več straneh aplikacije. Javna mapa ponuja tudi način, da nekatere datoteke ne pridejo v sisteme za nadzor različic, kot je Git, kar lahko pomaga ohranjati varnost in zasebnost.

Kako uvozim datoteko CSS iz javne mape v React

V React Routerju lahko uvozite datoteko CSS iz javne mape z uporabo komponente Link. Komponenta povezave vam omogoča, da v atributu href določite pot do datoteke. Na primer:

To bo uvozilo datoteko styles.css iz vaše javne mape v vašo aplikacijo React Router.