Kuxazululiwe: phendula umzila usebenzisa izitayela ezivela kufolda yomphakathi

Inkinga enkulu ehlobene ne-React Router isebenzisa izitayela ezivela kufolda yomphakathi ukuthi kungaba nzima ukulandelela izitayela futhi uqiniseke ukuthi zisetshenziswe ngendlela efanele. Njengoba ifolda yomphakathi ingeyona ingxenye yesihlahla sengxenye ye-React, kungaba nzima ukwazi ukuthi yiziphi izitayela ezisetshenziswayo nokuthi nini. Ukwengeza, uma izingxenye eziningi zisebenzisa isitayela esifanayo kufolda yomphakathi, kungase kube nzima ukulungisa noma yiziphi izinkinga eziphakamayo.

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 Isabela kusuka 'kusabela'; // Ukungenisa umtapo wezincwadi we-React
2. ngenisa i-{ BrowserRouter as Router, Route } isuka 'ku-react-router-dom'; // Ukungenisa i-BrowserRouter kanye nezingxenye Zomzila kusuka kumtapo wezincwadi we-react-router-dom
3. ngenisa { createGlobalStyle } kusuka 'ku-styled-components'; // Ukungenisa umsebenzi we-createGlobalStyle kumtapo wezincwadi owenziwe ngesitayela
4. ngenisa Ikhasi Lasekhaya lisuka './pages/HomePage'; // Ukungenisa ingxenye Yekhasi Lasekhaya
5. ngenisa i-AboutPage ukusuka ku-'./pages/AboutPage'; // Ukungenisa ingxenye ye-AboutPage
6. const GlobalStyle = createGlobalStyle`…`; // Izitayela zomhlaba zalo lonke uhlelo lokusebenza. Lokhu kuzosetshenziswa kuzo zonke izingxenye.
7. const App = () => (…); // Ingxenye eyinhloko yohlelo lokusebenza. Kulapho kuchazwa khona yonke imizila.
8. ; // Ukuchaza umzila onendlela eqondile ethi “/” enikeza ingxenye Yekhasi Lasekhaya
9. ; // Ukuchaza umzila ngendlela ethi “/mayelana” enikeza ingxenye ye-AboutPage
10 Uhlelo lokusebenza oluzenzakalelayo lokuthekelisa;// Ithekelisa uhlelo lokusebenza njengokuzenzakalelayo

Ukusebenzisa Izitayela

Izitayela zingasetshenziswa ku-React Router ukwenza ngendlela oyifisayo ukubukeka nomuzwa wohlelo lokusebenza. Izitayela zingasetshenziswa ukudala izingxenye zangokwezifiso, ukwengeza ukugqwayiza, nokuningi. Izitayela zingaphinda zisetshenziselwe ukudala izakhiwo eziphendulayo ezijwayelana nosayizi abahlukahlukene besikrini. Ukwengeza, izitayela zingasetshenziswa ukudala amatimu ohlelo lokusebenza avumela abasebenzisi ukwenza ngokwezifiso umuzwa wabo.

Ukusebenzisa Ifolda Yomphakathi

Ifolda yomphakathi ku-React Router ifolda ekhethekile engasetshenziswa ukugcina amafayela amile njengezithombe, i-CSS, ne-JavaScript. Lawa mafayela anikezwa ngokuqondile kufolda yomphakathi ngaphandle kokucutshungulwa uhlelo lokusebenza lwe-React. Lokhu kuvumela izikhathi zokulayisha ngokushesha futhi kwenza kube lula ukuphatha amafa kumakhasi amaningi wohlelo lokusebenza. Ifolda yomphakathi iphinde inikeze indlela yokugcina amafayela athile ngaphandle kwezinhlelo zokulawula inguqulo njenge-Git, engasiza ukugcina ukuphepha nobumfihlo.

Ngilingenisa kanjani ifayela le-CSS lisuka kufolda yomphakathi ku-React

Ku-React Router, ungangenisa ifayela le-CSS kufolda yomphakathi ngokusebenzisa ingxenye yesixhumanisi. Ingxenye yesixhumanisi ikuvumela ukuthi ucacise indlela eya kufayela kusibaluli se- href. Ngokwesibonelo:

Lokhu kuzongenisa ifayela le-styles.css lisuka kufolda yakho yomphakathi liye kuhlelo lwakho lokusebenza Lwerutha ye-React.