React Router je standardna knjižnica za usmerjanje v Reactu. Omogoča navigacijo med pogledi različnih komponent v aplikaciji React, omogoča spreminjanje URL-ja brskalnika in ohranja uporabniški vmesnik sinhroniziran z URL-jem.
Da bi razumeli, kako deluje React Router, ustvarimo preprosto aplikacijo za React. Aplikacija bo vključevala komponente dom, o in kontakt. Za krmarjenje med temi komponentami bomo uporabljali React Router.
npx create-react-app
Vaše razvojno okolje je pripravljeno. Zdaj pa namestimo React Router v našo aplikacijo.
hashtable java
React Router : React Router lahko namestite v svojo aplikacijo React prek npm. Za nastavitev usmerjevalnika v aplikaciji React sledite spodnjim korakom:
1. korak: CD v imeniku vašega projekta, tj ., java.
2. korak: Uporabite naslednji ukaz za namestitev React Routerja:
npm namestitev - -save react-router-dom
Po namestitvi react-router-dom dodajte njegove komponente svoji aplikaciji React.
Dodajanje komponent usmerjevalnika React:
Glavne komponente React Routerja so:
Namesto prečkanja v zaporedju se poti izberejo na podlagi najboljšega ujemanja.
Če želite svoji aplikaciji dodati komponente React Router, odprite imenik projekta v urejevalniku, ki ga uporabljate, in pojdite na datoteko app.js. Zdaj dodajte spodnjo kodo v app.js.
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; Opomba: BrowserRouter je vzdevek Router.
Uporaba usmerjevalnika React: Za uporabo React Routerja najprej ustvarimo nekaj komponent v aplikaciji React. V imeniku vašega projekta ustvarite mapo z imenom 'components' znotraj mape src in zdaj dodajte 3 datoteke z imenom 'home.js', 'about.js' in 'contact.js' v mapo 'components'.
Dodajmo nekaj kode našim 3 komponentam:
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; Zdaj pa vključimo komponente React Router v aplikacijo:
BrowserRouter : dodajte vzdevek BrowserRouter kot usmerjevalnik v datoteko app.js, da zavijete vse druge komponente. BrowserRouter je nadrejena komponenta in ima lahko samo enega podrejenega.
class App extends Component { render() { return ( ); } } Povezave: Ustvarimo zdaj povezave naših komponent. Komponenta povezave uporablja rekvizite za opis lokacije, do katere naj vodi povezava.
<ul> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul>
Zdaj zaženite aplikacijo na lokalnem gostitelju in kliknite ustvarjeno povezavo. Opazili boste, da se URL-ji spreminjajo glede na vrednost komponente povezave.
Pot : Komponenta poti nam bo pomagala vzpostaviti povezavo med uporabniškim vmesnikom komponente in URL-jem. Če želite vključiti pot v aplikacijo, dodajte spodnjo kodo v app.js.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Komponente so zdaj povezane in s klikom katere koli povezave bo upodobljena ustrezna komponenta. Poskusimo zdaj razumeti rekvizite, povezane s korensko komponento.
- Element se nanaša na komponento, ki bo upodobljena, če se pot ujema.
Opomba: Poti so privzeto vključujoče, kar pomeni, da se lahko več kot ena komponenta poti ujema s potjo URL in upodablja hkrati. Če želimo upodobiti eno komponento, moramo tukaj uporabiti poti.
Poti : Če želite prebrati posamezno komponento, ovijte vse poti znotraj komponente Routes.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Skupine preklapljajte po več poteh, jih ponovite in poiščite prvo, ki se ujema s potjo. Tako je upodobljena ustrezna komponenta poti.
Tukaj je naša celotna izvorna koda po dodajanju vseh komponent:
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> Zdaj lahko kliknete povezavo in krmarite po različnih komponentah. React Router ohranja uporabniški vmesnik vaše aplikacije sinhroniziran z URL-jem.
gimp odstrani vodni žig
Končno smo uspešno implementirali navigacijo v naši aplikaciji React z uporabo React Routerja.
A, ki uporablja API za zgodovino HTML5 (dogodki pushstate, replacestate in popstate), da vaš uporabniški vmesnik ostane sinhroniziran z URL-jem.
osnovno ime: niz
Osnovni URL za vse lokacije. Če se vaša aplikacija streže iz podimenika na vašem strežniku, jo boste želeli nastaviti v ta podimenik. Pravilno oblikovano osnovno ime mora vsebovati prvo poševnico, ne pa končne poševnice.
// renders // renders <a href="tmp//calendar/tomorrow"> ... </a>
getUserConfirmation: funk
Funkcija za potrditev navigacije. Privzeto uporablja window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> forceRefresh: bool
Če je res, bo usmerjevalnik uporabljal navigacijo po strani za osveževanje celotne strani. Morda boste želeli to uporabiti za posnemanje delovanja tradicionalne strežniško upodobljene aplikacije z osveževanjem celotne strani med krmarjenjem po straneh.
keyLength: število
Dolžina lokacije. Ključ. Privzeto je 6.
otroci: vozlišče- podrejeni element za upodabljanje.
Opomba: Pri Reactu morate uporabiti en podrejeni element, ker metoda upodabljanja ne more vrniti več kot enega elementa. Če potrebujete več kot en element, jih lahko poskusite zaviti v dodatni ali .
A, ki uporablja zgoščeni del URL-ja (tj. window.location.hash), da vaš uporabniški vmesnik ostane sinhroniziran z URL-jem.
k-nn algoritem
Opomba: zgoščena vrednost ne podpira lokacije zgodovine. Ključ ali lokacija. Država. V prejšnjih različicah smo poskušali zmanjšati vedenje, vendar je bilo robnih primerov, ki jih nismo mogli rešiti. Nobena koda ali vtičnik, ki zahteva to vedenje, ne bo deloval.
Ker je ta tehnologija namenjena podpori samo starejših brskalnikov, vam priporočamo, da namesto tega konfigurirate svoj strežnik za delo.
osnovno ime: niz
Osnovni URL za vse lokacije. Pravilno oblikovano osnovno ime mora imeti začetno poševnico, ne pa končne poševnice.
// renders <a href="#/calendar/today"> </a>
getUserConfirmation: funk
Funkcija za potrditev navigacije. Privzeto uporablja window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> hashType: niz
Kodiranje, ki se uporablja za window.location.hash . Razpoložljive vrednosti so:
- 'poševnica' - ustvari zgoščene vrednosti, kot sta #/ in #/sunshine/lollipops
- 'noslash' - # in #sonček/lizike . kot ustvarja hash
- 'hashbang' - ustvari 'ajax crawlable' (google ga je opustil), kot sta #!/ in #!/sunshine/lollipops
Privzeto je 'poševnica'.
otroci: vozlišče
En podrejeni element za upodabljanje.
Zagotavlja deklarativno, dostopno navigacijo po vaši aplikaciji.
About
za: niz
Nizovna predstavitev lokacije povezave je ustvarjena z združevanjem lastnosti poti lokacije, iskanja in zgoščevanja.
Objekt, ki ima lahko katero koli od naslednjih lastnosti:
do: funk
Funkcija, v kateri je trenutna lokacija posredovana kot argument in ki mora vrniti predstavitev lokacije kot niz ali predmet.
({ ...location, pathname: '/courses' })} /> `${location.pathname}?sort=name`} /> zamenjaj: bool
Če je res, bo klik na povezavo zamenjal trenutni vnos, namesto da bi dodal novega
entry to the history stack.
notranja ref.: funk
Od React Routerja 5.1, če uporabljate React 16, ne bi smeli potrebovati te podlage, saj posredujemo referenčno vrednost osnovnemu . Namesto tega uporabite običajni ref.
Omogoča dostop do vgrajene ref.
prehod pred naročilom
{ // `node` refers to the mounted DOM element // or null when unmounted }} /> innerRef: RefObject
podatkovne strukture java
Od React Routerja 5.1, če uporabljate React 16, ne bi smeli potrebovati te podpore, ker posredujemo ref osnovnemu . Namesto tega uporabite običajni ref.
Pridobite osnovni ref komponente z uporabo React.createRef.
let anchorRef = React.createRef()
komponenta: React.Component
Če želite uporabiti lastno navigacijsko komponento, lahko to storite tako, da jo podate skozi komponento prop.
const FancyLink = React.forwardRef(({ navigate, ...props }, ref) => { return ( <a ref="{ref}" {...props} onclick="{handleClick}">💅 {props.children} ) }) </a> Lahko tudi posredujete rekvizite, na katerih bi radi bili kot je naslov, id, ime razreda itd.
Posebna različica tega bo upodobljenemu elementu dodala atribute sloga, če se ujema z obstoječim URL-jem.
About
ime razreda: niz | funk
className je lahko niz ali funkcija, ki vrne niz. Če je uporabljena funkcija className, se aktivno stanje povezave posreduje kot parameter. To je koristno, če želite izključno uporabiti className za neaktivno povezavo.
'nav-link' + (!isActive ? ' unselected' : '') } >
pogosta vprašanja
V React Router v6 bo activeClassName odstranjen in uporabite funkcijo className, da uporabite ime razreda za aktivne ali neaktivne komponente NavLink.
ActiveClassName: niz
razred, da poda element, ko je aktiven. Privzeti dani razred je aktiven. Kombiniran bo s podlago za ime razreda.
slog: predmet | funk
style je lahko objekt React.CSSProperties ali funkcija, ki vrne objekt style. Če je uporabljen stil funkcije, se aktivno stanje povezave posreduje kot parameter.
({ color: isActive ? 'green' : 'blue' })} > V React Router v6 bo aktivni slog odstranjen in morate uporabiti slog funkcije, da uporabite vgrajene sloge za aktivne ali neaktivne komponente NavLink.
Aktivni slog: predmet
Slogi, uporabljeni za element, ko je aktiven.
<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
Če je res, bo končna poševnica na poti do lokacije upoštevana pri ugotavljanju, ali se lokacija ujema s trenutnim URL-jem. Za več podrobnosti si oglejte dokumentacijo.
Events
isActive: funk
Funkcija za dodajanje dodatne logike za ugotavljanje, ali je povezava aktivna. To je treba uporabiti, ko želite storiti več kot preveriti, ali se ime poti povezave ujema z imenom poti trenutnega URL-ja.
{ 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 Primerja s trenutno lokacijo zgodovine (običajno trenutni URL brskalnika).
arija-tok: niz
Vrednost atributa area-current, uporabljenega na aktivni povezavi. Razpoložljive vrednosti so:
- 'stran' - uporablja se za označevanje povezave znotraj nabora povezav za označevanje strani
- 'Koraki' - uporabljajo se za označevanje povezave znotraj indikatorja korakov za proces, ki temelji na korakih
- 'lokacija' - uporablja se za označevanje slike, ki je vizualno označena kot trenutna komponenta diagrama poteka
- 'datum' - uporablja se za označevanje trenutnega datuma v koledarju
- 'čas' - uporablja se za prikaz trenutnega časa v voznem redu
- 'true' - uporablja se za označevanje, ali je NavLink aktiven
- 'false' - uporablja se za preprečevanje odziva podpornih tehnologij na trenutno povezavo (en primer uporabe bi bil preprečiti več oznak trenutnega območja na strani)