React Router este o bibliotecă standard pentru rutare în React. Permite navigarea între vizualizările din diferite componente într-o aplicație React, permite modificarea adresei URL a browserului și menține interfața de utilizare sincronizată cu adresa URL.
Pentru a înțelege cum funcționează React Router, să creăm o aplicație simplă pentru React. Aplicația va include componentele de acasă, despre și de contact. Vom folosi React Router pentru a naviga între aceste componente.
npx create-react-app
Mediul dumneavoastră de dezvoltare este pregătit. Acum să instalăm React Router în aplicația noastră.
React Router : React Router poate fi instalat în aplicația dvs. React prin npm. Urmați pașii de mai jos pentru a configura routerul în aplicația dvs. React:
Pasul 1: CD-ul în directorul de proiect, de ex ., java.
Pasul 2: Utilizați următoarea comandă pentru a instala React Router:
npm install - -save react-router-dom
După instalarea react-router-dom, adăugați componentele sale în aplicația dvs. React.
Adăugarea componentelor routerului React:
Principalele componente ale React Router sunt:
În loc să parcurgeți în secvență, rutele sunt selectate pe baza celei mai bune potriviri.
Pentru a adăuga componente React Router la aplicația dvs., deschideți directorul de proiect în editorul pe care îl utilizați și accesați fișierul app.js. Acum, adăugați codul de mai jos la app.js.
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; Notă: BrowserRouter este alias ca Router.
Folosind React Router: Pentru a utiliza React Router, să creăm mai întâi câteva componente în aplicația React. În directorul proiectului, creați un folder numit componente în folderul src și acum adăugați 3 fișiere denumite home.js, about.js și contact.js în folderul componente.
Să adăugăm niște cod la cele 3 componente ale noastre:
Home.js:
import React from 'react'; function Home (){ return } export default Home; Despre.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; Acum, să includem componentele React Router în aplicație:
BrowserRouter : adăugați un alias BrowserRouter ca router în fișierul dvs. app.js pentru a include toate celelalte componente. BrowserRouter este o componentă părinte și poate avea un singur copil.
class App extends Component { render() { return ( ); } } Linkuri: Să creăm acum legăturile componentelor noastre. Componenta Link folosește elemente de recuzită pentru a descrie locația către care ar trebui să navigheze linkul.
<ul> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul>
Acum, rulați aplicația pe gazda locală și faceți clic pe linkul creat. Veți observa că URL-urile se modifică în funcție de valoarea componentei link.
Traseu : Componenta rută ne va ajuta să stabilim legătura dintre interfața de utilizare a componentei și adresa URL. Pentru a include ruta în aplicație, adăugați codul de mai jos în app.js.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Componentele sunt acum conectate, iar făcând clic pe orice link va reda componenta corespunzătoare. Să încercăm acum să înțelegem elementele de recuzită asociate cu componenta rădăcină.
- Element se referă la componenta care va fi redată dacă calea se potrivește.
Notă: În mod implicit, rutele sunt inclusive, ceea ce înseamnă că mai multe componente ale rutei pot potrivi o cale URL și pot randa simultan. Dacă vrem să redăm o singură componentă, trebuie să folosim rute aici.
Trasee : Pentru a citi o singură componentă, includeți toate rutele în componenta Rute.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Schimbați grupurile pe mai multe rute, repetați peste ele și găsiți primul care se potrivește cu calea. Astfel, este redată componenta corespunzătoare a căii.
Iată codul nostru sursă complet după adăugarea tuturor componentelor:
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> Acum, puteți face clic pe link și puteți naviga între diferitele componente. React Router menține interfața de utilizare a aplicației dvs. sincronizată cu adresa URL.
În cele din urmă, am implementat cu succes navigarea în aplicația noastră React folosind React Router.
A care utilizează API-ul istoric HTML5 (evenimente pushstate, replacestate și popstate) pentru a vă menține interfața de utilizare sincronizată cu adresa URL.
nume de bază: șir
Adresa URL de bază pentru toate locațiile. Dacă aplicația dvs. este difuzată dintr-un subdirector de pe serverul dvs., veți dori să o setați în acel subdirector. Un nume de bază formatat corespunzător trebuie să conțină o bară oblică de început, dar nicio bară oblică finală.
// renders // renders <a href="tmp//calendar/tomorrow"> ... </a>
getUserConfirmation: func
O funcție de utilizat pentru a confirma navigarea. În mod implicit, se utilizează window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> forceRefresh: bool
Dacă este adevărat, routerul va folosi reîmprospătările pe toată pagina de navigare pe pagină. Este posibil să doriți să utilizați acest lucru pentru a imita modul în care o aplicație tradițională redată pe server ar funcționa cu reîmprospătări de pagină completă între navigarea paginii.
Lungimea cheii: număr
Lungimea locației. Cheie. Implicit la 6.
copii: nodul- element copil de redat.
Notă: Pe React, trebuie să utilizați un singur element copil, deoarece metoda de randare nu poate returna mai mult de un element. Dacă aveți nevoie de mai mult de un element, puteți încerca să le împachetați într-un element suplimentar sau .
A care utilizează partea hash a adresei URL (adică window.location.hash) pentru a vă menține interfața de utilizare sincronizată cu adresa URL.
Notă: hash-ul nu acceptă locația istorică. Cheie sau locație. Stat. În versiunile anterioare, am încercat să reducem comportamentul, dar au existat cazuri marginale pe care nu le-am putut rezolva. Orice cod sau plugin care necesită acest comportament nu va funcționa.
Deoarece această tehnologie este destinată să accepte doar browsere mai vechi, vă încurajăm să vă configurați serverul pentru a funcționa în schimb.
nume de bază: șir
Adresa URL de bază pentru toate locațiile. Un nume de bază formatat corespunzător ar trebui să aibă o bară oblică inițială, dar fără bară oblică finală.
// renders <a href="#/calendar/today"> </a>
getUserConfirmation: func
O funcție de utilizat pentru a confirma navigarea. În mod implicit, se utilizează window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> hashType: șir
Codificarea folosită pentru fereastră.locație.hash . Valorile disponibile sunt:
- 'slash' - creează hashuri precum #/ și #/sunshine/lollipops
- „noslash” - # și #sunshine/lollipops . ca hash creeaza
- „hashbang” - creează „ajax crawable” (depreciat de Google) ca #!/ și #!/sunshine/lollipops
Setarea implicită este „slash”.
copii: nod
Un singur element copil de randat.
Oferă navigare declarativă și accesibilă în jurul aplicației dvs.
About
la: sfoară
O reprezentare în șir a unei locații de link este creată prin combinarea căii locației, căutarea și proprietățile hash.
Un obiect care poate avea oricare dintre următoarele proprietăți:
la: func
O funcție în care locația curentă este transmisă ca argument și care trebuie să returneze reprezentarea locației ca șir sau obiect.
({ ...location, pathname: '/courses' })} /> `${location.pathname}?sort=name`} /> înlocuiți: bool
Când este adevărat, făcând clic pe Link va înlocui intrarea curentă în loc să adăugați una nouă
entry to the history stack.
ref intern: func
Începând cu React Router 5.1, dacă utilizați React 16, nu ar trebui să aveți nevoie de această reclamă, deoarece trimitem referința către cel de bază. . Utilizați în schimb un ref normal.
Permite accesul la codul încorporat al componentei.
{ // `node` refers to the mounted DOM element // or null when unmounted }} /> innerRef: RefObject
Începând cu React Router 5.1, dacă utilizați React 16, nu ar trebui să aveți nevoie de această reclamă, deoarece trimitem referința către cel de bază. . Utilizați în schimb un ref normal.
Obțineți referința de bază a componentei folosind React.createRef.
let anchorRef = React.createRef()
component: React.Component
Dacă doriți să utilizați propria componentă de navigare, puteți face acest lucru trecând-o prin prop.
const FancyLink = React.forwardRef(({ navigate, ...props }, ref) => { return ( <a ref="{ref}" {...props} onclick="{handleClick}">💅 {props.children} ) }) </a> De asemenea, puteți trece recuzită pe care ați dori să vă aflați cum ar fi un titlu, id, className etc.
O versiune specială a acesteia va adăuga atribute de stil la elementul randat dacă se potrivește cu o adresă URL existentă.
About
className: șir | func
className poate fi fie un șir, fie o funcție care returnează un șir. Dacă se utilizează funcția className, starea activă a legăturii este transmisă ca parametru. Acest lucru este util dacă doriți să aplicați exclusiv un className unui link inactiv.
'nav-link' + (!isActive ? ' unselected' : '') } >
Întrebări frecvente
În React Router v6, activeClassName va fi eliminat și ar trebui să utilizați funcția className pentru a aplica numele clasei la componentele NavLink active sau inactive.
ActiveClassName: șir
clasă pentru a da elementul atunci când este activ. Clasa dată implicită este activă. Acesta va fi combinat cu prop numele clasei.
stil: obiect | func
stilul poate fi fie un obiect React.CSProperties, fie o funcție care returnează un obiect de stil. Dacă se folosește stilul funcției, starea activă a legăturii este transmisă ca parametru.
({ color: isActive ? 'green' : 'blue' })} > În React Router v6, stilul activ va fi eliminat și trebuie să utilizați stilul funcției pentru a aplica stiluri inline la componentele NavLink active sau inactive.
Stil activ: obiect
Stilurile aplicate elementului atunci când acesta este activ.
do while loop în java
<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> strict: bool
Dacă este adevărat, bara oblică finală de pe calea unei locații va fi luată în considerare atunci când se determină dacă locația se potrivește cu adresa URL curentă. Consultați documentația pentru mai multe detalii.
Events
isActive: func
O funcție pentru a adăuga o logică suplimentară pentru a determina dacă Link-ul este activ. Aceasta ar trebui folosită atunci când doriți să faceți mai mult decât să verificați că calea link-ului se potrivește cu calea URL-ului curent.
{ 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 locație: obiect
isActive Compară cu locația curentă a istoricului (de obicei, adresa URL curentă a browserului).
aria-curent: string
Valoarea atributului de zonă-curent utilizat pe legătura activă. Valorile disponibile sunt:
- „pagină” - folosit pentru a indica un link într-un set de linkuri de paginare
- „Pași” - folosit pentru a indica o legătură în indicatorul de pas pentru un proces bazat pe etape
- „locație” - folosit pentru a indica o imagine care este evidențiată vizual ca componentă curentă a diagramei flux
- „data” - folosit pentru a indica data curentă în calendar
- „ora” - folosit pentru a indica ora curentă într-un orar
- „adevărat” - folosit pentru a indica dacă NavLink este activ
- „fals” - folosit pentru a împiedica tehnologiile de asistență să reacționeze la linkul curent (un caz de utilizare ar fi prevenirea mai multor etichete de zonă curente pe o pagină)