Atrisināts: reaģējiet uz maršrutētāju, izmantojot stilus no publiskās mapes

Galvenā problēma, kas saistīta ar React Router, izmantojot publiskās mapes stilus, ir tāda, ka var būt grūti izsekot stiliem un pārliecināties, ka tie tiek lietoti pareizi. Tā kā publiskā mape nav daļa no React komponentu koka, var būt grūti zināt, kuri stili un kad tiek lietoti. Turklāt, ja vairāki komponenti izmanto vienu un to pašu stilu no publiskās mapes, var būt grūti atkļūdot visas radušās problēmas.

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ēt React no 'react'; // React bibliotēkas importēšana
2. importēt { BrowserRouter as Router, Route } no 'react-router-dom'; // BrowserRouter un Route komponentu importēšana no react-router-dom bibliotēkas
3. importēt { createGlobalStyle } no 'styled-components'; // Funkcijas createGlobalStyle importēšana no stila komponentu bibliotēkas
4. importēt sākumlapu no './pages/HomePage'; // Mājas lapas komponenta importēšana
5. importēt AboutPage no './pages/AboutPage'; // Tiek importēts komponents AboutPage
6. const GlobalStyle = createGlobalStyle`…`; // Globālie stili visai lietotnei. Tas tiks piemērots visiem komponentiem.
7. const App = () => (…); // Lietojumprogrammas galvenā sastāvdaļa. Šeit ir noteikti visi maršruti.
8. ; // Maršruta definēšana ar precīzu “/” ceļu, kas atveido HomePage komponentu
9. ; // Maršruta definēšana ar ceļu “/about”, kas atveido AboutPage komponentu
10 eksportēt noklusējuma lietotni;// Lietotnes eksportēšana kā noklusējuma programma

Stilu izmantošana

React Router var izmantot stilus, lai pielāgotu lietojumprogrammas izskatu un darbību. Stilus var izmantot, lai izveidotu pielāgotus komponentus, pievienotu animācijas un daudz ko citu. Stilus var izmantot arī, lai izveidotu adaptīvus izkārtojumus, kas pielāgojas dažādiem ekrāna izmēriem. Turklāt stilus var izmantot, lai izveidotu lietojumprogrammas motīvus, kas lietotājiem ļauj pielāgot savu pieredzi.

Izmantojot publisko mapi

React Router publiskā mape ir īpaša mape, ko var izmantot statisku failu, piemēram, attēlu, CSS un JavaScript, glabāšanai. Šie faili tiek pasniegti tieši no publiskās mapes, lietojumprogramma React tos neapstrādā. Tas nodrošina ātrāku ielādes laiku un atvieglo līdzekļu pārvaldību vairākās lietojumprogrammas lapās. Publiskā mape nodrošina arī veidu, kā dažus failus nepieļaut versiju kontroles sistēmām, piemēram, Git, kas var palīdzēt uzturēt drošību un privātumu.

Kā importēt CSS failu no React publiskās mapes

Programmā React Router varat importēt CSS failu no publiskās mapes, izmantojot komponentu Saite. Saites komponents ļauj norādīt ceļu uz failu atribūtā href. Piemēram:

Tas importēs styles.css failu no jūsu publiskās mapes jūsu React Router lietojumprogrammā.

Related posts:

Leave a Comment