Lahendatud: kuidas installida react ruuteri dom

React Router DOM on Reacti ökosüsteemis laialdaselt kasutatav teek marsruutimisvõimalustega üheleheliste rakenduste loomiseks. Üks selle teegi olulisi eeliseid on see, et see pakub mitmesuguseid funktsioone URL-ide sobitamiseks ja teatud komponentide aktiveerimiseks.

Mis on React Router Dom?

React Router DOM on dünaamiline kliendipoolne marsruutimisteek Reageerima keskkond, mis võimaldab arendajatel luua tugevaid ja juurdepääsetavaid veebirakendusi. Põhiidee on sünkroonida kasutajaliides praeguse URL-iga, muutes rakenduse intuitiivseks ja kasutajasõbralikuks.

See teek rikastab oluliselt kasutajakogemust, kuna tagab, et kasutajad ei pea rakenduses navigeerimise ajal brauserit värskendama. Pealegi on selle rakendamine lihtne.

Reacti ruuteri DOM installimine

Selle seadistamiseks peame esmalt installima teegi react-ruuter-dom. Seda saab hõlpsasti teha, käivitades terminalis järgmised käsud:

npm install react-router-dom

See käsk installib Reageeri ruuter DOM pakett meie projekti. Pärast edukat installimist saame nüüd oma rakendusse importida vajaliku komponendi 'react-router-dom'ist.

React Router Domi seadistamine

Nüüd, kui oleme selle edukalt oma projekti installinud, on aeg see ellu viia. Vaatame react-ruuter-dom põhirakendust:

import React from 'react';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import Component1 from './Component1';
import Component2 from './Component2';
function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Component1} />
        <Route path="/component2" component={Component2} />
      </Switch>
    </Router>
  );
}
export default App;

Ülaltoodud koodis oleme importinud vajalikud komponendid Reageeri ruuter DOM raamatukogu.

Koodeksi mõistmine

• . `` kasutab kasutajaliidese URL-iga sünkroonis hoidmiseks HTML5 ajaloo API-d (pushState, changeState ja popstate sündmus). Oleme andnud sellele varjunime `` mugavuse huvides.
• Ruuterisse oleme paigutanud `` komponent. See React Routeri komponent otsib oma lastest `` komponendid, et renderdada esimene, kus tee tugi ühtib asukoha praeguse teenimega.
• Järgmised sammud hõlmavad `` komponent. See on koht, kus maagia juhtub. Marsruudi komponenti kasutatakse meie rakenduse erinevate marsruutide määratlemiseks. Määratlesime kaks teed: vaiketee ('/'), mis laadib komponendi 1, ja teise tee ("/komponent2"), mis laadib juurdepääsu korral komponent2.

Marsruutimise kontseptsioon on Reactis üheleheliste rakenduste loomisel põhiline. Koos Reageeri ruuter DOM, muutub selle rakendamine lihtsaks ja intuitiivseks.

Lisaomadused

React Router Dom pakub palju muid funktsioone peale ülalnimetatute. Näiteks pesastatud marsruutimine, URL-i parameetrid, programmiline navigeerimine jne on mõned lisafunktsioonid, mida see teek arendaja kogemuse parandamiseks pakub.

React Router Domi mõistmine ja valdamine on iga Reacti arendaja jaoks ülioluline, kuna see on dünaamiliste ja interaktiivsete veebirakenduste loomise aluseks.