Ratkaistu: reagoi reitittimeen käyttämällä julkisen kansion tyylejä

Suurin ongelma, joka liittyy React Routeriin käyttämällä julkisen kansion tyylejä, on, että voi olla vaikeaa seurata tyylejä ja varmistaa, että niitä käytetään oikein. Koska julkinen kansio ei ole osa React-komponenttipuuta, voi olla vaikea tietää, mitä tyylejä käytetään ja milloin. Lisäksi, jos useat komponentit käyttävät samaa tyyliä julkisesta kansiosta, voi olla vaikeaa korjata mahdollisia ongelmia.

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. tuo React kohdasta "react"; // React-kirjaston tuonti
2. tuo { BrowserRouter as Router, Route } hakemistosta 'react-router-dom'; // BrowserRouter- ja Route-komponenttien tuonti react-router-dom-kirjastosta
3. tuo { createGlobalStyle } 'styled-komponenteista'; // CreateGlobalStyle-funktion tuonti styled-components -kirjastosta
4. tuo kotisivu osoitteesta './pages/HomePage'; // Kotisivu-komponentin tuonti
5. tuo AboutPage osoitteesta './pages/AboutPage'; // AboutPage-komponentin tuonti
6. const GlobalStyle = createGlobalStyle`…`; // Globaalit tyylit koko sovellukselle. Tätä sovelletaan kaikkiin komponentteihin.
7. const App = () => (…); // Sovelluksen pääkomponentti. Täällä määritellään kaikki reitit.
8. ; // Reitin määrittäminen tarkalla polulla "/", joka hahmontaa HomePage-komponentin
9. ; // Reitin määrittäminen polulla "/about", joka hahmontaa AboutPage-komponentin
10 vie oletussovellus;// Vie sovellus oletuksena

Tyylien käyttäminen

Tyylit voidaan käyttää React Routerissa mukauttaaksesi sovelluksen ulkoasua ja tuntumaa. Tyylien avulla voidaan luoda mukautettuja komponentteja, lisätä animaatioita ja paljon muuta. Tyylien avulla voidaan myös luoda reagoivia asetteluja, jotka mukautuvat eri näyttökokoihin. Lisäksi tyylejä voidaan käyttää luomaan sovellukselle teemoja, joiden avulla käyttäjät voivat mukauttaa käyttökokemustaan.

Julkisen kansion käyttäminen

React Routerin julkinen kansio on erityinen kansio, jota voidaan käyttää staattisten tiedostojen, kuten kuvien, CSS:n ja JavaScriptin, tallentamiseen. Nämä tiedostot toimitetaan suoraan julkisesta kansiosta ilman, että React-sovellus käsittelee niitä. Tämä mahdollistaa nopeammat latausajat ja helpottaa resurssien hallintaa sovelluksen useilla sivuilla. Julkinen kansio tarjoaa myös tavan pitää tietyt tiedostot poissa versionhallintajärjestelmistä, kuten Git, mikä voi auttaa ylläpitämään turvallisuutta ja yksityisyyttä.

Kuinka tuon CSS-tiedoston Reactin julkisesta kansiosta

React Routerissa voit tuoda CSS-tiedoston julkisesta kansiosta Link-komponentin avulla. Linkki-komponentin avulla voit määrittää tiedoston polun href-attribuutissa. Esimerkiksi:

Tämä tuo styles.css-tiedoston julkisesta kansiosta React Router -sovellukseesi.