React Router on vakiokirjasto Reactin reitittämiseen. Se mahdollistaa navigoinnin React-sovelluksen eri komponenttien näkymien välillä, sallii selaimen URL-osoitteen muuttamisen ja pitää käyttöliittymän synkronoituna URL-osoitteen kanssa.
Ymmärtääksemme, kuinka React Router toimii, luodaan yksinkertainen sovellus Reactille. Sovellus sisältää koti-, tieto- ja yhteystiedot. Käytämme React Routeria navigoidaksemme näiden komponenttien välillä.
npx Create-React-app
Kehitysympäristösi on valmis. Asennataan nyt React Router sovellukseemme.
React Router : React Router voidaan asentaa React-sovellukseesi npm:n kautta. Noudata alla olevia ohjeita asettaaksesi reitittimen React-sovelluksessasi:
Vaihe 1: CD-levy projektihakemistossasi, ts ., java.
Vaihe 2: Asenna React Router käyttämällä seuraavaa komentoa:
npm install - -save react-router-dom
Kun olet asentanut react-router-dom, lisää sen komponentit React-sovellukseesi.
React-reitittimen komponenttien lisääminen:
React Routerin pääkomponentit ovat:
Sen sijaan, että kulkisi peräkkäin, reitit valitaan parhaan osuman perusteella.
Jos haluat lisätä React Router -komponentteja sovellukseesi, avaa projektihakemistosi käyttämässäsi editorissa ja siirry app.js-tiedostoon. Lisää nyt alla oleva koodi app.js-tiedostoon.
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; Huomautus: BrowserRouter on alias Router.
React Routerin käyttäminen: Käyttääksesi React Routeria, luodaan ensin joitakin komponentteja React-sovelluksessa. Luo projektihakemistoosi kansio nimeltä komponentit src-kansioon ja lisää nyt komponenttien kansioon kolme tiedostoa nimeltä home.js, about.js ja contact.js.
java-kuplalajittelu
Lisätäänpä koodia kolmeen osaamme:
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; Sisällytetään nyt React Router -komponentit sovellukseen:
BrowserRouter : Lisää aliasoitu BrowserRouter reitittimeksi app.js-tiedostoosi kääriäksesi kaikki muut komponentit. BrowserRouter on pääkomponentti ja sillä voi olla vain yksi lapsi.
mysql luo käyttäjä
class App extends Component { render() { return ( ); } } Linkit: Luokaamme nyt komponenttiemme linkit. Linkki-komponentti käyttää rekvisiittaa kuvaamaan sijaintia, johon linkin tulee navigoida.
<ul> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul>
Suorita nyt sovelluksesi paikallisessa isännässä ja napsauta luotua linkkiä. Huomaat, että URL-osoitteet muuttuvat linkkikomponentin arvon mukaan.
Reitti : Reittikomponentti auttaa meitä luomaan linkin komponentin käyttöliittymän ja URL-osoitteen välille. Jos haluat sisällyttää reitin sovellukseen, lisää alla oleva koodi app.js-tiedostoosi.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Komponentit on nyt yhdistetty, ja minkä tahansa linkin napsauttaminen näyttää vastaavan komponentin. Yritetään nyt ymmärtää juurikomponenttiin liittyvät rekvisiitta.
- Elementti viittaa komponenttiin, joka hahmonnetaan, jos polku täsmää.
Huomautus: Oletuksena reitit ovat osallisia, mikä tarkoittaa, että useampi kuin yksi reittikomponentti voi vastata URL-polkua ja hahmontaa samanaikaisesti. Jos haluamme hahmontaa yhden komponentin, meidän on käytettävä reittejä tässä.
Reitit : Jos haluat lukea yksittäisen osan, kääri kaikki reitit Reitit-komponentin sisään.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Vaihda ryhmiä useille reiteille, iteroi niitä ja löydä ensimmäinen, joka vastaa polkua. Siten polun vastaava komponentti renderöidään.
Tässä on täydellinen lähdekoodimme kaikkien komponenttien lisäämisen jälkeen:
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> Nyt voit napsauttaa linkkiä ja selata eri osia. React Router pitää sovelluksesi käyttöliittymän synkronoituna URL-osoitteen kanssa.
Lopuksi olemme onnistuneesti ottaneet käyttöön navigoinnin React-sovelluksessamme React Routerin avulla.
A, joka käyttää HTML5-historiasovellusliittymää (pushstate-, korvaustila- ja popstate-tapahtumat) pitämään käyttöliittymäsi synkronoituna URL-osoitteen kanssa.
perusnimi: merkkijono
Kaikkien sijaintien perus-URL-osoite. Jos sovelluksesi tarjotaan palvelimesi alihakemistosta, haluat asettaa sen kyseiseen alihakemistoon. Oikein muotoillun perusnimen tulee sisältää vinoviiva, mutta ei perässä olevaa kauttaviivaa.
// renders // renders <a href="tmp//calendar/tomorrow"> ... </a>
getUserConfirmation: func
Toiminto, jota käytetään navigoinnin vahvistamiseen. Oletuksena käytetään window.confirm-toimintoa.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> forceRefresh: bool
Jos tosi, reititin käyttää koko sivun päivityksiä sivulla. Haluat ehkä käyttää tätä jäljittelemään sitä, kuinka perinteinen palvelimen hahmontama sovellus toimisi koko sivun päivityksellä sivulla navigoinnin välillä.
avaimen pituus: numero
Sijainnin pituus. Avain. Oletusarvo on 6.
lapset: solmu- renderöitävä lapsielementti.
Huomautus: Reactissa sinun on käytettävä yhtä alielementtiä, koska renderöintimenetelmä ei voi palauttaa useampaa kuin yhtä elementtiä. Jos tarvitset useamman kuin yhden elementin, voit yrittää kääriä ne lisä- tai .
A, joka käyttää URL-osoitteen hash-osaa (eli window.location.hash) pitämään käyttöliittymäsi synkronoituna URL-osoitteen kanssa.
govinda näyttelijä
Huomaa: hash ei tue historian sijaintia. Avain tai sijainti. Osavaltio. Aiemmissa versioissa yritimme vähentää toimintaa, mutta oli reunatapauksia, joita emme pystyneet ratkaisemaan. Mikään koodi tai laajennus, joka vaatii tätä toimintaa, ei toimi.
Koska tämä tekniikka on tarkoitettu tukemaan vain vanhempia selaimia, suosittelemme, että määrität palvelimesi toimimaan sen sijaan.
perusnimi: merkkijono
Kaikkien sijaintien perus-URL-osoite. Oikein muotoillussa perusnimessä tulee olla kauttaviiva, mutta ei perässä olevaa kauttaviivaa.
// renders <a href="#/calendar/today"> </a>
getUserConfirmation: func
Toiminto, jota käytetään navigoinnin vahvistamiseen. Oletuksena käytetään window.confirm-toimintoa.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> hashType: merkkijono
Käytetty koodaus window.location.hash . Käytettävissä olevat arvot ovat:
- 'slash' - luo tiivisteitä, kuten #/ ja #/sunshine/lllipops
- 'noslash' - # ja #auringonpaiste/tikkurit . kuten hash luo
- 'hashbang' - luo 'ajax crawlable' (googlen käytöstä poistama) tiivisteitä, kuten #!/ ja #!/sunshine/lollipops
Oletusarvo on 'vinoviiva'.
lapset: solmu
Yksi hahmonnettava alielementti.
Tarjoaa ilmoittavan, helppokäyttöisen navigoinnin sovelluksesi ympärillä.
About
to: merkkijono
Linkin sijainnin merkkijonoesitys luodaan yhdistämällä sijainnin polun nimi, haku ja hajautusominaisuudet.
Objekti, jolla voi olla jokin seuraavista ominaisuuksista:
vastaanottajalle: func
Funktio, jossa nykyinen sijainti välitetään argumenttina ja jonka on palautettava sijaintiesitys merkkijonona tai objektina.
({ ...location, pathname: '/courses' })} /> `${location.pathname}?sort=name`} /> korvaa: bool
Kun tosi, linkin napsauttaminen korvaa nykyisen merkinnän uuden lisäämisen sijaan
entry to the history stack.
sisäinen viite: funk
React Router 5.1:stä lähtien, jos käytät React 16:ta, sinun ei pitäisi tarvita tätä tukia, koska välitämme viitteen taustalla olevalle . Käytä sen sijaan tavallista viitettä.
Mahdollistaa pääsyn komponentin sisäänrakennettuun viitenumeroon.
ääretön silmukka
{ // `node` refers to the mounted DOM element // or null when unmounted }} /> innerRef: RefObject
React Router 5.1:stä lähtien, jos käytät React 16:ta, sinun ei pitäisi tarvita tätä tukia, koska välitämme viitteen taustalla olevalle . Käytä sen sijaan tavallista viitettä.
Hanki komponentin taustalla oleva viite käyttämällä React.createRef.
let anchorRef = React.createRef()
komponentti: React.Component
Jos haluat hyödyntää omaa navigointikomponenttiasi, voit tehdä sen kuljettamalla sen komponenttipotkun läpi.
const FancyLink = React.forwardRef(({ navigate, ...props }, ref) => { return ( <a ref="{ref}" {...props} onclick="{handleClick}">💅 {props.children} ) }) </a> Voit myös välittää rekvisiitta, jonka haluat olla mukana kuten otsikko, tunnus, luokan nimi jne.
Erityinen versio siitä lisää tyyliattribuutteja renderöityyn elementtiin, jos se vastaa olemassa olevaa URL-osoitetta.
About
luokannimi: merkkijono | func
className voi olla joko merkkijono tai funktio, joka palauttaa merkkijonon. Jos käytetään funktiota className, linkin aktiivinen tila välitetään parametrina. Tästä on hyötyä, jos haluat käyttää luokan nimeä yksinomaan passiiviseen linkkiin.
'nav-link' + (!isActive ? ' unselected' : '') } >
UKK
React Router v6:ssa activeClassName poistetaan, ja sinun tulee käyttää funktiota className luokan nimen käyttämiseen aktiivisiin tai ei-aktiivisiin NavLink-komponentteihin.
ActiveClassName: merkkijono
luokka antaa elementin, kun se on aktiivinen. Oletuksena annettu luokka on aktiivinen. Se yhdistetään luokkanimen rekvisiittiin.
java lisäyslajittelu
tyyli: esine | func
tyyli voi olla joko React.CSSSProperties-objekti tai funktio, joka palauttaa tyyliobjektin. Jos funktiotyyliä käytetään, linkin aktiivinen tila välitetään parametrina.
({ color: isActive ? 'green' : 'blue' })} > React Router v6:ssa aktiivinen tyyli poistetaan, ja sinun on käytettävä funktiotyyliä sisällyttääksesi tyylejä aktiivisiin tai ei-aktiivisiin NavLink-komponentteihin.
Aktiivinen tyyli: Objekti
Tyylit, joita sovelletaan elementtiin, kun se on aktiivinen.
<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> tiukka: bool
Jos tosi, sijainnin polun nimen lopussa oleva vinoviiva otetaan huomioon määritettäessä, vastaako sijainti nykyistä URL-osoitetta. Katso lisätietoja dokumentaatiosta.
Events
isActive: func
Toiminto, joka lisää logiikkaa sen määrittämiseksi, onko linkki aktiivinen. Tätä tulisi käyttää, kun haluat tehdä muutakin kuin varmistaa, että linkin polkunimi vastaa nykyisen URL-osoitteen polkunimeä.
{ 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 sijainti: esine
isActive Vertaa nykyiseen historian sijaintiin (yleensä nykyiseen selaimen URL-osoitteeseen).
aria-virta: merkkijono
Aktiivisessa linkissä käytetyn area-current-attribuutin arvo. Käytettävissä olevat arvot ovat:
- 'sivu' - käytetään osoittamaan linkki joukossa sivutuslinkkejä
- 'Vaiheet' - käytetään osoittamaan linkki vaiheittaisen prosessin vaiheilmaisimen sisällä
- 'sijainti' - käytetään osoittamaan kuvaa, joka on visuaalisesti korostettu vuokaavion nykyisenä komponenttina
- 'päivämäärä' - käytetään osoittamaan nykyinen päivämäärä kalenterissa
- 'aika' - käytetään osoittamaan nykyinen aika aikataulussa
- 'true' - käytetään osoittamaan, onko NavLink aktiivinen
- 'false' - käytetään estämään avustavia tekniikoita reagoimasta nykyiseen linkkiin (yksi käyttötapaus olisi estää useita nykyisen alueen tunnisteita sivulla)