Isonjululwe: phendula umzila usebenzisa izimbo ezisuka kwisiqulathi seefayili sikawonke-wonke

Ingxaki ephambili enxulumene neReact Router usebenzisa izimbo ezisuka kwifolda yoluntu kukuba kunokuba nzima ukugcina umkhondo weendlela kwaye uqinisekise ukuba zisetyenziswe ngokuchanekileyo. Kuba ifolda yoluntu ingeyonxalenye yomthi we-React component, kunokuba nzima ukwazi ukuba zeziphi izimbo ezisetyenziswayo kwaye nini. Ukongeza, ukuba amalungu amaninzi asebenzisa isimbo esinye kwisiqulathi seefayili sikawonke-wonke, kunokuba nzima ukulungisa nayiphi na imiba evelayo.

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. ngenisa i-React kwi-'react'; // Ukungenisa ngaphandle ilayibrari yeReact
2. ngenisa ngaphandle {IbrowserRouter njengeNdlela, Indlela } ukusuka kwi-'react-router-dom'; // Ukuthathwa ngaphandle kwe-BrowserRouter kunye nezixhobo zeNdlela kwilayibrari ye-react-router-dom
3. ngenisa ngaphandle { createGlobalStyle } ukusuka 'kwi-styled-components'; // Ukungenisa ngaphandle umsebenzi we-createGlobalStyle kwithala leencwadi elinesitayile
4. ngenisa iPhepha lasekhaya ukusuka './pages/HomePage'; // Ukuthathwa ngaphandle kwecandelo lePhepha lasekhaya
5. ngenisa i-AboutPage ukusuka './pages/AboutPage'; // Ukungenisa icandelo le-AboutPage
6. const GlobalStyle = createGlobalStyle`…`; // Izitayile zehlabathi ze-app iyonke. Oku kuya kusetyenziswa kuwo onke amacandelo.
7. const App = () => (…); // Elona candelo liphambili losetyenziso. Kulapho zonke iindlela zichazwe khona.
8. ; // Ukuchaza indlela enendlela echanekileyo ye "/" eyenza icandelo leKhaya leKhaya
9. ; // Ukuchaza indlela enendlela "/ malunga" eyenza icandelo le-AboutPage
I-10 yokuthumela ngaphandle ehlala ikho;// I-App yokuthumela ngaphandle njengendawo ehlala ihleli

Ukusebenzisa Izimbo

Izimbo zingasetyenziswa kwiReact Router ukwenza ngokwezifiso inkangeleko kunye nokuziva kwesicelo. Izimbo zingasetyenziselwa ukwenza amacandelo angokwezifiso, ukongeza oopopayi, kunye nokunye. Izimbo zisenokusetyenziswa ukwenza iziyilo eziphendulayo ezihambelana nobukhulu obahlukeneyo besikrini. Ukongeza, izitayile zingasetyenziselwa ukwenza imixholo yesicelo evumela abasebenzisi ukuba benze amava abo.

Ukusebenzisa isiqulathi seefayili sikawonke-wonke

Isiqulathi seefayili sikawonke-wonke kwi-React Router yifolda ekhethekileyo engasetyenziselwa ukugcina iifayile ezimile njengemifanekiso, iCSS, kunye neJavaScript. Ezi fayile zihanjiswa ngokuthe ngqo kwisiqulathi seefayili sikawonke-wonke ngaphandle kokusingathwa sisicelo seReact. Oku kuvumela amaxesha okulayisha akhawulezayo kwaye kwenza kube lula ukulawula ii-asethi kumaphepha amaninzi esicelo. Isiqulathi seefayili sikawonke-wonke sikwabonelela ngendlela yokugcina iifayile ezithile ngaphandle kwenkqubo yolawulo lwenguqulelo efana neGit, enokunceda ukugcina ukhuseleko nobumfihlo.

Ndiyingenisa njani ifayile yeCSS kwisiqulathi seefayili sikawonke-wonke kwi-React

Kwi-React Router, ungangenisa ngaphandle ifayile ye-CSS kwifolda yoluntu ngokusebenzisa icandelo leNxulumano. Icandelo leNxulumano likuvumela ukuba uchaze indlela eya kwifayile kuphawu lwe- href. Umzekelo:

Oku kuya kungenisa ifayile ye styles.css esuka kwisilawulo sakho sikawonke-wonke kwisicelo sakho seReact Router.