Išspręsta: react maršrutizatoriaus verpalai

Pagrindinė problema, susijusi su React Router siūlais, yra ta, kad gali būti sunku tinkamai sukonfigūruoti. Tai reikalauja daug sąrankos ir konfigūracijos, o jei tai daroma neteisingai, tai gali sukelti netikėtą elgesį arba klaidas. Be to, „React Router“ verpalų dokumentacija ne visada yra aiški arba atnaujinta, todėl kūrėjams sunku išspręsti problemas.

 add react-router-dom

import { BrowserRouter as Router, Route, Link } from "react-router-dom"; 

<Router> 
    <div> 
        <ul> 
            <li><Link to="/">Home</Link></li> 
            <li><Link to="/about">About</Link></li> 
            <li><Link to="/topics">Topics</Link></li> 
        </ul>

        <hr />

        <Route exact path="/" component={Home} /> 
        <Route path="/about" component={About} /> 
        <Route path="/topics" component={Topics} />  

    </div>  
</Router>

1. Ši eilutė importuoja BrowserRouter, Route ir Link komponentus iš react-router-dom bibliotekos:
importuoti { BrowserRouter as Router, Route, Link } iš „react-router-dom“;

2. Ši eilutė apvynioja visą programą maršrutizatoriaus komponentu, kad būtų teikiamos maršruto parinkimo funkcijos:

3. Šiame div elemente yra nuorodų, kurios bus naudojamos naršyti tarp skirtingų maršrutų, sąrašas:

  • Pagrindinis
  • Apie mus
  • tematika

4. Šis hr elementas naudojamas kaip vaizdinis navigacijos nuorodų ir maršruto turinio atskyriklis:


5. Šiose eilutėse apibrėžiami trys skirtingi mūsų programos maršrutai naudojant „React Router“ maršruto komponentą:

6. Galiausiai ši uždaromoji div žyma uždaro programos įpakavimo elementą div:

kas yra „React Router“.

„React Router“ yra „React“ maršruto parinkimo biblioteka, leidžianti kūrėjams kurti ir valdyti maršrutus savo „React“ programose. Tai suteikia galimybę deklaratyviai susieti maršrutus su komponentais, tvarkyti URL parametrus ir valdyti navigacijos įvykius. Jame taip pat yra tokių funkcijų kaip dinaminis maršruto suderinimas, vietos perėjimo tvarkymas ir slinkties atkūrimas.

Kas yra verpalai

„Yarn“ yra „JavaScript“ paketų tvarkyklė, padedanti kūrėjams efektyviau ir saugiau valdyti savo priklausomybes. Jį naudoja „React Router“, kad įdiegtų, atnaujintų ir konfigūruotų paketus. „Yarn“ taip pat padeda kūrėjams sekti savo projekto priklausomybes, užtikrinant, kad visi reikalingi paketai būtų įdiegti ir atnaujinti. Taip lengviau dirbti su projektais su keliais kūrėjais, nes kiekvienas gali lengvai patikrinti, kokias paketų versijas jiems reikia naudoti.

Susijusios naujienos:

Palikite komentarą