Atrisināts: kā instalēt react maršrutētāju dom ar

Pēdējā atjaunošana: 09/11/2023
Autors: JavaScript SourceTrail

React Router DOM ir plaši izmantota bibliotēka React ekosistēmā, lai izveidotu vienas lapas lietojumprogrammas ar maršrutēšanas iespējām. Viena no nozīmīgajām šīs bibliotēkas priekšrocībām ir tā, ka tā nodrošina virkni funkciju URL saskaņošanai un noteiktu komponentu aktivizēšanai.

Kas ir React Router Dom?

React Router DOM ir dinamiska, klienta puses maršrutēšanas bibliotēka React vidē, kas ļauj izstrādātājiem izveidot stabilas un pieejamas tīmekļa lietojumprogrammas. Pamatideja ir sinhronizēt lietotāja saskarni ar pašreizējo URL, padarot lietojumprogrammu intuitīvu un lietotājam draudzīgu.

Šī bibliotēka ievērojami bagātina lietotāja pieredzi, jo tā nodrošina, ka lietotājiem nav jāatsvaidzina pārlūkprogramma, pārvietojoties pa lietojumprogrammu. Turklāt tā īstenošana ir vienkārša.

React Router DOM instalēšana

Lai to iestatītu, mums vispirms ir jāinstalē react-router-dom bibliotēka. To var viegli izdarīt, terminālī izpildot šādas komandas:

npm install react-router-dom

Šī komanda instalē React Router DOM pakotni mūsu projektā. Pēc veiksmīgas instalēšanas mēs varam importēt nepieciešamo komponentu no 'react-router-dom' mūsu lietojumprogrammā.

React Router Dom iestatīšana

Tagad, kad esam to veiksmīgi instalējuši mūsu projektā, ir pienācis laiks to īstenot. Apskatīsim react-router-dom pamata ieviešanu:

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;

Iepriekš redzamajā kodā mēs esam importējuši nepieciešamās komponentes no React Router DOM bibliotēkas.

Kodeksa izpratne

  • The `Komponents izmanto HTML5 vēstures API (pushState, changeState un popstate notikumu), lai UI sinhronizētu ar URL. Mēs tam esam piešķīruši aizstājvārdu `` ērtībai.
  • Maršrutētāja ietvaros esam ievietojuši `` sastāvdaļa. Šis React Router komponents meklē savus bērnus` komponenti, lai renderētu pirmo, kur ceļa rekvizīts atbilst atrašanās vietas pašreizējam ceļa nosaukumam.
  • Nākamās darbības ietver `` sastāvdaļa. Šeit notiek maģija. Maršruta komponents tiek izmantots, lai definētu dažādus mūsu lietojumprogrammas maršrutus. Mēs definējām divus ceļus: noklusējuma ceļu (“/”), kas ielādē komponentu1, un citu ceļu (“/komponents2”), kas ielādēs komponentu2, kad tam piekļūst.

Maršrutēšanas koncepcija ir būtiska vienas lapas lietojumprogrammu izveidei programmā React. Ar React Router DOM tā kļūst viegli un intuitīvi ieviešama.

Papildu funkcijas

React Router Dom piedāvā daudzas citas funkcijas, izņemot iepriekš minētās. Piemēram, ligzdota maršrutēšana, URL parametri, programmatiskā navigācija utt. ir dažas no papildu funkcijām, ko šī bibliotēka nodrošina, lai uzlabotu izstrādātāja pieredzi.

React Router Dom izpratne un apgūšana ir ļoti svarīga jebkuram React izstrādātājam, jo ​​tas veido pamatu dinamisku un interaktīvu tīmekļa lietojumprogrammu izveidei.

Related posts: