React Router je standardna biblioteka za usmjeravanje u Reactu. Omogućuje navigaciju između prikaza iz različitih komponenti u React aplikaciji, omogućuje promjenu URL-a preglednika i održava UI sinkroniziranom s URL-om.
Da biste razumjeli kako React Router radi, kreirajmo jednostavnu aplikaciju za React. Aplikacija će sadržavati komponente dom, informacije i kontakt. Koristit ćemo React Router za navigaciju između ovih komponenti.
npx create-react-app
Vaše razvojno okruženje je spremno. Instalirajmo sada React Router u našu aplikaciju.
React Router : React Router se može instalirati u vašu React aplikaciju putem npm-a. Slijedite korake u nastavku kako biste postavili Router u svojoj React aplikaciji:
fibonaccijev niz java
Korak 1: CD u direktoriju vašeg projekta, tj ., java.
Korak 2: Koristite sljedeću naredbu za instalaciju React Routera:
npm install - -save react-router-dom
Nakon instaliranja react-router-doma, dodajte njegove komponente svojoj React aplikaciji.
Dodavanje komponenti React usmjerivača:
Glavne komponente React Routera su:
Umjesto da se kreće u nizu, rute se odabiru na temelju najboljeg podudaranja.
Kako biste svojoj aplikaciji dodali komponente React Routera, otvorite direktorij projekta u uređivaču koji koristite i idite na datoteku app.js. Sada dodajte kod u nastavku u app.js.
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; Napomena: BrowserRouter je alias kao Router.
Korištenje React Routera: Da bismo koristili React Router, prvo napravimo neke komponente u React aplikaciji. U direktoriju vašeg projekta stvorite mapu pod nazivom komponente unutar mape src i sada dodajte 3 datoteke pod nazivom home.js, about.js i contact.js u mapu komponenti.
Dodajmo neki kod u naše 3 komponente:
Home.js:
import React from 'react'; function Home (){ return } export default Home; About.js:
import React from 'react'; function About () { return <h2> jAVAtPOINT is a computer science portal for TUTORIALS!</h2> Read more about us at : <a href="https://www.javatpoint.in/about/"> https://www.javatpoint.in/about/ </a> } export default About; Contact.js:
import React from 'react'; function Contact (){ return You can find us here: <br> Javatpoint <br> G-13, second floor, Sector -3 Noida <br> Noida, Uttar Pradesh (201305) } export default Contact; Sada uključimo komponente React Routera u aplikaciju:
BrowserRouter : Dodajte aliased BrowserRouter kao usmjerivač u svoju app.js datoteku da omotate sve ostale komponente. BrowserRouter je nadređena komponenta i može imati samo jedno dijete.
class App extends Component { render() { return ( ); } } Linkovi: Kreirajmo sada veze naših komponenti. Komponenta Link koristi props za opisivanje lokacije do koje bi poveznica trebala voditi.
<ul> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul>
Sada pokrenite svoju aplikaciju na lokalnom hostu i kliknite na stvorenu vezu. Primijetit ćete da se URL-ovi mijenjaju prema vrijednosti komponente veze.
Ruta : Komponenta rute će nam pomoći da uspostavimo vezu između korisničkog sučelja komponente i URL-a. Da biste rutu uključili u aplikaciju, dodajte kod u nastavku u svoj app.js.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Komponente su sada povezane, a klik na bilo koju vezu prikazat će odgovarajuću komponentu. Pokušajmo sada razumjeti rekvizite povezane s root komponentom.
- Element se odnosi na komponentu koja će se prikazati ako se putanja podudara.
Napomena: Prema zadanim postavkama, rute su uključive, što znači da se više od jedne komponente rute može podudarati s URL putanjom i prikazati istovremeno. Ako želimo renderirati jednu komponentu, ovdje moramo koristiti rute.
Rute : Za čitanje jedne komponente, omotajte sve rute unutar komponente Rute.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Prebacite grupe na više ruta, iterirajte ih i pronađite prvu koja odgovara stazi. Tako se prikazuje odgovarajuća komponenta staze.
Evo našeg punog izvornog koda nakon dodavanja svih komponenti:
import React, { Component } from 'react'; import { BrowserRouter as Router,Routes, Route, Link } from 'react-router-dom'; import Home from './component/home'; import Contact from './component/contact'; import About from './component/about'; import './App.css'; class App extends Component { render() { return ( <ul classname="App-header"> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul> <route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> ); } } export default App; </route></route></route> Sada možete kliknuti na vezu i kretati se različitim komponentama. React Router sinkronizira korisničko sučelje vaše aplikacije s URL-om.
Konačno, uspješno smo implementirali navigaciju u našoj React aplikaciji pomoću React Routera.
A koji koristi API povijesti HTML5 (događaji pushstate, replacestate i popstate) kako bi vaše korisničko sučelje bilo sinkronizirano s URL-om.
tok java filtera
osnovno ime: niz
Osnovni URL za sve lokacije. Ako se vaša aplikacija poslužuje iz poddirektorija na vašem poslužitelju, trebali biste je postaviti na taj poddirektorij. Ispravno formatirano osnovno ime mora sadržavati početnu kosu crtu, ali ne i završnu.
// renders // renders <a href="tmp//calendar/tomorrow"> ... </a>
getUserConfirmation: funk
Funkcija za potvrdu navigacije. Zadano se koristi window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> forceRefresh: bool
Ako je istina, usmjerivač će koristiti navigaciju na stranici osvježava cijelu stranicu. Možda ćete to htjeti upotrijebiti za oponašanje načina na koji bi tradicionalna aplikacija koju prikazuje poslužitelj radila s osvježavanjem cijele stranice između navigacije po stranici.
keyLength: broj
Duljina lokacije. Ključ. Zadano je 6.
djeca: čvor- podređeni element za iscrtavanje.
Napomena: Na Reactu morate koristiti jedan podređeni element jer metoda renderiranja ne može vratiti više od jednog elementa. Ako trebate više od jednog elementa, možete ih pokušati umotati u dodatni ili .
A koji koristi hash dio URL-a (tj. window.location.hash) kako bi vaše korisničko sučelje bilo sinkronizirano s URL-om.
naredba bash if
Napomena: hash ne podržava lokaciju povijesti. Ključ ili lokacija. Država. U prethodnim verzijama pokušali smo smanjiti ponašanje, ali bilo je rubnih slučajeva koje nismo mogli riješiti. Svaki kôd ili dodatak koji zahtijeva ovo ponašanje neće raditi.
Budući da je ova tehnologija namijenjena za podršku samo starijim preglednicima, preporučujemo vam da umjesto toga konfigurirate svoj poslužitelj za rad.
osnovno ime: niz
Osnovni URL za sve lokacije. Pravilno oblikovano osnovno ime mora imati početnu kosu crtu, ali ne i završnu.
// renders <a href="#/calendar/today"> </a>
getUserConfirmation: funk
Funkcija za potvrdu navigacije. Zadano se koristi window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> hashType: niz
Kodiranje koje se koristi za window.location.hash . Dostupne vrijednosti su:
- 'kosa crta' - stvara hashove kao što su #/ i #/sunshine/lollipops
- 'noslash' - # and #sunshine/lollipops . kao hash stvara
- 'hashbang' - stvara 'ajax crawlable' (google ga je zastario) kao #!/ i #!/sunshine/lollipops
Zadana je 'kosa crta'.
djeca: čvor
Jedan podređeni element za generiranje.
Omogućuje deklarativnu, pristupačnu navigaciju oko vaše aplikacije.
About
na: niz
Predstavljanje niza lokacije veze stvara se kombinacijom svojstva putanje lokacije, pretraživanja i raspršivanja.
Objekt koji može imati bilo koje od sljedećih svojstava:
na: funk
Funkcija u kojoj se trenutna lokacija prosljeđuje kao argument i koja mora vratiti reprezentaciju lokacije kao niz ili objekt.
({ ...location, pathname: '/courses' })} /> `${location.pathname}?sort=name`} /> zamijeniti: bool
Kada je istinito, klik na vezu zamijenit će trenutni unos umjesto dodavanja novog
entry to the history stack.
interna referenca: funk
Od React Routera 5.1, ako koristite React 16, ne biste trebali trebati ovu podršku jer prosljeđujemo ref temeljnom . Umjesto toga upotrijebite normalnu ref.
Omogućuje pristup ugrađenoj ref.
java karta
{ // `node` refers to the mounted DOM element // or null when unmounted }} /> unutarnjiRef: RefObject
Od React Routera 5.1, ako koristite React 16, ne biste trebali trebati ovu podršku jer prosljeđujemo ref temeljnom . Umjesto toga upotrijebite normalnu ref.
java je nula
Dobijte temeljni ref komponente koristeći React.createRef.
let anchorRef = React.createRef()
komponenta: React.Component
Ako želite koristiti svoju vlastitu navigacijsku komponentu, to možete učiniti prolaskom kroz komponentu prop.
const FancyLink = React.forwardRef(({ navigate, ...props }, ref) => { return ( <a ref="{ref}" {...props} onclick="{handleClick}">💅 {props.children} ) }) </a> Također možete proslijediti rekvizite na kojima biste željeli biti kao što je naslov, ID, ime klase itd.
Posebna verzija toga će dodati atribute stila prikazanom elementu ako odgovara postojećem URL-u.
About
ime klase: niz | funk
className može biti niz ili funkcija koja vraća niz. Ako se koristi funkcija className, aktivno stanje veze prosljeđuje se kao parametar. Ovo je korisno ako želite isključivo primijeniti className na neaktivnu vezu.
'nav-link' + (!isActive ? ' unselected' : '') } >
FAQ
U React Routeru v6, activeClassName će biti uklonjen i trebali biste koristiti funkciju className za primjenu naziva klase na aktivne ili neaktivne NavLink komponente.
ActiveClassName: String
klasa za davanje elementa kada je aktivan. Zadana klasa je aktivna. Kombinirat će se s propozicijom imena klase.
stil: objekt | funk
style može biti objekt React.CSSProperties ili funkcija koja vraća objekt stila. Ako se koristi stil funkcije, aktivno stanje veze prosljeđuje se kao parametar.
({ color: isActive ? 'green' : 'blue' })} > U React Router v6, aktivni stil će biti uklonjen, a vi morate koristiti stil funkcije za primjenu ugrađenih stilova na aktivne ili neaktivne NavLink komponente.
Aktivni stil: Objekt
Stilovi primijenjeni na element kada je aktivan.
<navlink to="/faq" activestyle="{{" fontweight: 'bold', color: 'red' }} < pre> <h3>exact: bool</h3> <p>When true, the active class/style will only apply if the location is an exact match.</p> <pre> Profile </pre> <h3>strict: bool</h3> <p>If true, the trailing slash on a location's pathname will be considered when determining whether the location matches the current URL. See the documentation for more details.</p> <pre> Events </pre> <h3>isActive: func</h3> <p>A function to add additional logic to determine if the Link is active. This should be used when you want to do more than verify that the pathname of the Link matches the pathname of the current URL.</p> <pre> { if (!match) { return false; } // only consider an event active if its event id is an odd number const eventID = parseInt(match.params.eventID); return !isNaN(eventID) && eventID % 2 === 1; }} > Event 123 </pre> <h3>location: object</h3> <p>isActive Compares to the current history location (usually the current browser URL).</p> <h3>aria-current: string</h3> <p> <strong>The value of the area-current attribute used on the active Link. Available values are:</strong> </p> <ul> <li>'page' - used to indicate a link within a set of pagination links</li> <li>'Steps' - used to indicate a link within the step indicator for a step-based process</li> <li>'location' - used to indicate an image that is visually highlighted as the current component of the flow chart</li> <li>'date' - used to indicate the current date within the calendar</li> <li>'time' - used to indicate the current time within a timetable</li> <li>'true' - used to indicate whether NavLink is active</li> <li>'false' - used to prevent assistive technologies from reacting to the current Link (one use case would be to prevent multiple area-current tags on a page)</li> </ul> <hr></navlink> strog: bool
Ako je istina, kosa crta na kraju naziva putanje lokacije uzet će se u obzir pri utvrđivanju odgovara li lokacija trenutnom URL-u. Više pojedinosti potražite u dokumentaciji.
Events
isActive: funk
Funkcija za dodavanje dodatne logike za određivanje je li veza aktivna. Ovo bi se trebalo koristiti kada želite učiniti više od provjere odgovara li naziv putanje poveznice nazivu putanje trenutnog URL-a.
{ if (!match) { return false; } // only consider an event active if its event id is an odd number const eventID = parseInt(match.params.eventID); return !isNaN(eventID) && eventID % 2 === 1; }} > Event 123 lokacija: objekt
isActive Uspoređuje s trenutnom lokacijom u povijesti (obično trenutni URL preglednika).
arija-struja: žica
Vrijednost atributa area-current koji se koristi na aktivnoj vezi. Dostupne vrijednosti su:
- 'stranica' - koristi se za označavanje poveznice unutar skupa stranica paginacijskih veza
- 'Koraci' - koriste se za označavanje veze unutar indikatora koraka za proces temeljen na koracima
- 'lokacija' - koristi se za označavanje slike koja je vizualno istaknuta kao trenutna komponenta dijagrama toka
- 'datum' - koristi se za označavanje trenutnog datuma u kalendaru
- 'vrijeme' - koristi se za označavanje trenutnog vremena unutar rasporeda
- 'true' - koristi se za označavanje je li NavLink aktivan
- 'false' - koristi se za sprječavanje pomoćnih tehnologija da reagiraju na trenutnu vezu (jedan slučaj upotrebe bio bi spriječiti višestruke oznake trenutnog područja na stranici)