Zgjidhur: reagoni i ruterit duke përdorur stile nga dosja publike

Problemi kryesor që lidhet me React Router duke përdorur stile nga dosja publike është se mund të jetë e vështirë të mbash gjurmët e stileve dhe të sigurohesh që ato të zbatohen saktë. Meqenëse dosja publike nuk është pjesë e pemës së komponentëve React, mund të jetë e vështirë të dihet se cilat stile po aplikohen dhe kur. Për më tepër, nëse disa komponentë përdorin të njëjtin stil nga dosja publike, mund të jetë e vështirë të korrigjoni çdo problem që lind.

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 Reagon nga 'reagoj'; // Importimi i bibliotekës React
2. importoni { BrowserRouter si Router, Route } nga 'react-router-dom'; // Importimi i komponentëve BrowserRouter dhe Route nga biblioteka react-router-dom
3. importoni {createGlobalStyle } nga 'styled-components'; // Importimi i funksionit createGlobalStyle nga biblioteka e komponentëve të stilizuar
4. importoni faqen kryesore nga './pages/HomePage'; // Importimi i komponentit Home Page
5. importoni AboutPage nga './pages/AboutPage'; // Importimi i komponentit AboutPage
6. const GlobalStyle = krijoGlobalStyle`…`; // Stilet globale për të gjithë aplikacionin. Kjo do të zbatohet për të gjithë komponentët.
7. const App = () => (…); // Komponenti kryesor i aplikacionit. Këtu përcaktohen të gjitha rrugët.
8. ; // Përcaktimi i një itinerari me një shteg të saktë "/" që jep komponentin Home Page
9. ; // Përcaktimi i një itinerari me një shteg "/about" që jep komponentin AboutPage
10 Eksportimi i aplikacionit të paracaktuar;// Eksportimi i aplikacionit si parazgjedhje

Përdorimi i stileve

Stilet mund të përdoren në React Router për të personalizuar pamjen dhe ndjesinë e aplikacionit. Stilet mund të përdoren për të krijuar komponentë të personalizuar, për të shtuar animacione dhe më shumë. Stilet mund të përdoren gjithashtu për të krijuar paraqitje reaguese që përshtaten me madhësi të ndryshme të ekranit. Për më tepër, stilet mund të përdoren për të krijuar tema për aplikacionin që lejojnë përdoruesit të personalizojnë përvojën e tyre.

Përdorimi i Dosjes Publike

Dosja publike në React Router është një dosje e veçantë që mund të përdoret për të ruajtur skedarë statikë si imazhe, CSS dhe JavaScript. Këta skedarë shërbehen drejtpërdrejt nga dosja publike pa u përpunuar nga aplikacioni React. Kjo lejon kohë më të shpejta të ngarkimit dhe e bën më të lehtë menaxhimin e aseteve nëpër faqe të shumta të një aplikacioni. Dosja publike ofron gjithashtu një mënyrë për të mbajtur disa skedarë jashtë sistemeve të kontrollit të versioneve si Git, gjë që mund të ndihmojë në ruajtjen e sigurisë dhe privatësisë.

Si mund të importoj një skedar CSS nga dosja publike në React

Në React Router, mund të importoni një skedar CSS nga dosja publike duke përdorur komponentin Link. Komponenti Link ju lejon të specifikoni një shteg drejt skedarit në atributin href. Për shembull:

Kjo do të importojë skedarin styles.css nga dosja juaj publike në aplikacionin tuaj React Router.