Lahendatud: reageerige ruuterile avaliku kausta stiilide abil

Peamine probleem, mis on seotud avalikust kaustast pärit stiilide kasutamisega React Routeriga, on see, et stiilide jälgimine ja nende õige rakendamise tagamine võib olla keeruline. Kuna avalik kaust ei ole osa Reacti komponendipuust, võib olla raske teada, milliseid stiile ja millal rakendatakse. Lisaks, kui mitu komponenti kasutavad avalikust kaustast sama stiili, võib tekkida võivaid probleeme raske siluda.

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 React alates 'react'; // Reacti teegi importimine
2. importida { BrowserRouter as Router, Route } kaustast 'react-router-dom'; // BrowserRouteri ja Routei komponentide importimine teegist react-router-dom
3. importige { createGlobalStyle } kaustast 'styled-components'; // Funktsiooni createGlobalStyle importimine stiilikomponentide teegist
4. importige koduleht lehelt './pages/HomePage'; // Kodulehe komponendi importimine
5. importige AboutPage lehelt './pages/AboutPage'; // komponendi AboutPage importimine
6. const GlobalStyle = createGlobalStyle`…`; // Globaalsed stiilid kogu rakenduse jaoks. Seda rakendatakse kõikidele komponentidele.
7. const App = () => (…); // Rakenduse põhikomponent. Siin on määratletud kõik marsruudid.
8. ; // Marsruudi määratlemine täpse teega "/", mis renderdab kodulehe komponendi
9. ; // Marsruudi määratlemine teega „/about”, mis renderdab komponendi AboutPage
10 ekspordi vaikerakendus;// Rakenduse eksportimine vaikerakendusena

Stiilide kasutamine

React Routeris saab stiile kasutada rakenduse välimuse ja tunnetuse kohandamiseks. Stiile saab kasutada kohandatud komponentide loomiseks, animatsioonide lisamiseks ja muuks. Stiile saab kasutada ka erinevate ekraanisuurustega kohanduvate tundlike paigutuste loomiseks. Lisaks saab stiile kasutada rakenduse jaoks teemade loomiseks, mis võimaldavad kasutajatel oma kasutuskogemust kohandada.

Avaliku kausta kasutamine

React Routeri avalik kaust on spetsiaalne kaust, mida saab kasutada staatiliste failide (nt pildid, CSS ja JavaScript) salvestamiseks. Neid faile serveeritakse otse avalikust kaustast, ilma et rakendus React neid töötleks. See võimaldab kiiremat laadimisaega ja hõlbustab varade haldamist rakenduse mitmel lehel. Avalik kaust pakub ka võimalust hoida teatud failid versioonihaldussüsteemidest (nt Git) eemal, mis võib aidata säilitada turvalisust ja privaatsust.

Kuidas importida CSS-faili Reacti avalikust kaustast

React Routeris saate CSS-faili importida avalikust kaustast, kasutades linki komponenti. Link komponent võimaldab määrata faili tee atribuudis href. Näiteks:

See impordib faili styles.css teie avalikust kaustast teie rakendusse React Router.