Solvut: jirreaġixxi router billi tuża stili mill-folder pubbliku

Il-problema ewlenija relatata ma 'React Router bl-użu ta' stili mill-folder pubbliku hija li jista 'jkun diffiċli li żżomm kont tal-istili u tiżgura li jiġu applikati b'mod korrett. Peress li l-folder pubbliku mhuwiex parti mis-siġra tal-komponenti React, jista 'jkun diffiċli li tkun taf liema stili qed jiġu applikati u meta. Barra minn hekk, jekk komponenti multipli qed jużaw l-istess stil mill-folder pubbliku, jista 'jkun diffiċli li tiddibaggja kwalunkwe kwistjoni li tqum.

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. importazzjoni React minn 'react'; // Importazzjoni tal-librerija React
2. importazzjoni { BrowserRouter bħala Router, Rotta } minn 'react-router-dom'; // Importazzjoni tal-komponenti BrowserRouter u Route mil-librerija react-router-dom
3. importazzjoni { createGlobalStyle } minn 'styled-components'; // Importazzjoni tal-funzjoni createGlobalStyle mil-librerija tal-komponenti styled
4. importazzjoni HomePage minn './pages/HomePage'; // Importazzjoni tal-komponent HomePage
5. importazzjoni AboutPage minn './pages/AboutPage'; // Importazzjoni tal-komponent AboutPage
6. const GlobalStyle = createGlobalStyle`…`; // Stili globali għall-app kollha. Dan se jiġi applikat għall-komponenti kollha.
7. const App = () => (…); // Il-komponent ewlieni tal-app. Dan huwa fejn ir-rotot kollha huma definiti.
8. ; // Tiddefinixxi rotta b'mogħdija eżatta ta '"/" li tirrendi l-komponent HomePage
9. ; // Tiddefinixxi rotta b'mogħdija ta '"/about" li tirrendi l-komponent AboutPage
10 esportazzjoni default App;// Esportazzjoni App bħala default

Użu ta 'Stili

L-istili jistgħu jintużaw f'React Router biex jippersonalizzaw id-dehra u s-sensazzjoni tal-applikazzjoni. L-istili jistgħu jintużaw biex jinħolqu komponenti tad-dwana, iżidu animazzjonijiet, u aktar. L-istili jistgħu jintużaw ukoll biex jinħolqu layouts li jirrispondu li jadattaw għal daqsijiet differenti tal-iskrin. Barra minn hekk, stili jistgħu jintużaw biex jinħolqu temi għall-applikazzjoni li jippermettu lill-utenti jippersonalizzaw l-esperjenza tagħhom.

Uża l-Folder Pubbliku

Il-folder pubbliku f'React Router huwa folder speċjali li jista 'jintuża biex jaħżen fajls statiċi bħal immaġini, CSS u JavaScript. Dawn il-fajls huma moqdija direttament mill-folder pubbliku mingħajr ma jiġu pproċessati mill-applikazzjoni React. Dan jippermetti ħinijiet ta' tagħbija aktar mgħaġġla u jagħmilha aktar faċli biex jiġu mmaniġġjati l-assi fuq bosta paġni ta' applikazzjoni. Il-folder pubbliku jipprovdi wkoll mod biex iżommu ċerti fajls barra minn sistemi ta 'kontroll tal-verżjoni bħal Git, li jistgħu jgħinu biex iżżomm is-sigurtà u l-privatezza.

Kif nista 'nimporta fajl CSS minn folder pubbliku f'React

F'React Router, tista 'timporta fajl CSS mill-folder pubbliku billi tuża l-komponent Link. Il-komponent Link jippermettilek li tispeċifika mogħdija għall-fajl fl-attribut href. Pereżempju:

Dan se jimporta l-fajl styles.css mill-folder pubbliku tiegħek fl-applikazzjoni React Router tiegħek.