Solvita: reagi enkursigilon uzante stilojn el la publika dosierujo

La ĉefa problemo rilata al React Router uzanta stilojn el la publika dosierujo estas, ke povas esti malfacile konservi trakon de la stiloj kaj certigi, ke ili estas aplikataj ĝuste. Ĉar la publika dosierujo ne estas parto de la React-komponentarbo, povas esti malfacile scii kiuj stiloj estas aplikataj kaj kiam. Aldone, se pluraj komponantoj uzas la saman stilon de la publika dosierujo, povas esti malfacile sencimigi iujn ajn problemojn, kiuj aperas.

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. importi Reagi el 'reagi'; // Importante la React-bibliotekon
2. importi { BrowserRouter kiel Router, Route } de 'react-router-dom'; // Importi la komponantojn BrowserRouter kaj Route el la biblioteko react-router-dom
3. importi { createGlobalStyle } el 'styled-components'; // Importi la funkcion createGlobalStyle el la biblioteko de stilaj komponantoj
4. importi Hejmpaĝon de './pages/Hejmpaĝo'; // Importado de la Hejmpaĝo
5. importi AboutPage de './pages/AboutPage'; // Importante la komponanton AboutPage
6. const GlobalStyle = kreiGlobalStyle`...`; // Tutmondaj stiloj por la tuta apo. Ĉi tio estos aplikata al ĉiuj komponantoj.
7. const App = () => (…); // La ĉefa komponanto de la apo. Jen kie ĉiuj itineroj estas difinitaj.
8. ; // Difinante itineron kun preciza vojo de “/” kiu prezentas la Hejmpaĝon
9. ; // Difinante itineron kun vojo de "/pri" kiu bildigas la komponanton AboutPage
10 eksporti defaŭltan Apon;// Eksportante Apon defaŭlte

Uzante Stilojn

Stiloj povas esti uzataj en React Router por personecigi la aspekton de la aplikaĵo. Stiloj povas esti uzataj por krei kutimajn komponantojn, aldoni kuraĝigojn kaj pli. Stiloj ankaŭ povas esti uzataj por krei respondemajn aranĝojn, kiuj adaptiĝas al malsamaj ekranaj grandecoj. Aldone, stiloj povas esti uzataj por krei temojn por la aplikaĵo, kiuj permesas al uzantoj agordi sian sperton.

Uzante la Publikan Dosierujon

La publika dosierujo en React Router estas speciala dosierujo, kiu povas esti uzata por stoki senmovajn dosierojn kiel bildojn, CSS kaj JavaScript. Ĉi tiuj dosieroj estas servataj rekte el la publika dosierujo sen esti procesitaj de la React-apliko. Ĉi tio permesas pli rapidajn ŝarĝajn tempojn kaj faciligas administri aktivaĵojn tra pluraj paĝoj de aplikaĵo. La publika dosierujo ankaŭ disponigas manieron konservi certajn dosierojn ekstere de versio-kontrolsistemoj kiel Git, kiuj povas helpi konservi sekurecon kaj privatecon.

Kiel mi importas CSS-dosieron el publika dosierujo en React

En React Router, vi povas importi CSS-dosieron el la publika dosierujo uzante la Link-komponenton. La Link-komponento permesas al vi specifi vojon al la dosiero en la href-atributo. Ekzemple:

Ĉi tio importos la styles.css-dosieron el via publika dosierujo en vian aplikaĵon React Router.