React Router DOM široko je korištena biblioteka u React ekosustavu za izradu jednostraničkih aplikacija s mogućnostima usmjeravanja. Jedna od značajnih prednosti ove biblioteke je da pruža niz značajki za podudaranje URL-ova i aktiviranje određenih komponenti.
Što je React Router Dom?
React Router DOM je dinamična biblioteka usmjeravanja na strani klijenta u Reagovati okruženje, omogućujući programerima stvaranje robusnih i pristupačnih web aplikacija. Temeljna ideja je sinkronizirati vaše korisničko sučelje s trenutnim URL-om, čineći vašu aplikaciju intuitivnom i jednostavnom za korištenje.
Ova biblioteka značajno obogaćuje korisničko iskustvo jer osigurava da korisnici ne moraju osvježavati preglednik tijekom navigacije kroz aplikaciju. Štoviše, implementacija za ovo je jednostavna.
Instaliranje React Router DOM-a
Da bismo ovo postavili, prvo moramo instalirati biblioteku react-router-dom. To se lako može učiniti pokretanjem sljedećih naredbi na vašem terminalu:
npm install react-router-dom
Ova naredba instalira React Router DOM upakirati u naš projekt. Nakon uspješne instalacije, sada možemo uvesti potrebnu komponentu iz 'react-router-dom' u našu aplikaciju.
Postavljanje React Routera Dom
Sada kada smo ovo uspješno instalirali na naš projekt, vrijeme je da to implementiramo. Pogledajmo osnovnu implementaciju react-router-dom:
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;
U gornjem kodu uvezli smo potrebne komponente iz React Router DOM knjižnica.
Razumijevanje Kodeksa
-
Korištenje električnih romobila ističe `
` komponenta koristi API povijesti HTML5 (pushState, replaceState i popstate događaj) kako bi korisničko sučelje bilo sinkronizirano s URL-om. Dali smo mu alias ` ` radi praktičnosti. - Unutar rutera postavili smo `
` komponenta. Ova React Router komponenta pretražuje svoje potomke ` ` komponente za renderiranje prve gdje prop staza odgovara trenutnom nazivu putanje lokacije. - Sljedeći koraci uključuju `
` komponenta. Ovdje se događa magija. Komponenta Ruta koristi se za definiranje različitih ruta naše aplikacije. Definirali smo dvije staze, zadanu stazu ('/') koja učitava Komponentu1 i drugu stazu ('/component2') koja bi učitavala Komponentu2 kada joj se pristupi.
Koncept usmjeravanja temeljan je za stvaranje jednostraničkih aplikacija u Reactu. S React Router DOM, postaje jednostavno i intuitivno za implementaciju.
Dodatne značajke
React Router Dom nudi mnogo više značajki osim gore navedenih. Na primjer, ugniježđeno usmjeravanje, parametri URL-a, programska navigacija, itd., neke su od dodatnih značajki koje ova biblioteka pruža za poboljšanje iskustva programera.
Razumijevanje i ovladavanje React Router Domom ključno je za svakog React Developera jer čini osnovu za stvaranje dinamičnih i interaktivnih web aplikacija.