„React Router“ yra standartinė „React“ maršruto parinkimo biblioteka. Tai leidžia naršyti tarp skirtingų „React“ programos komponentų rodinių, pakeisti naršyklės URL ir sinchronizuoti vartotojo sąsają su URL.
Norėdami suprasti, kaip veikia „React Router“, sukurkime paprastą „React“ programą. Programa apims namų, informacijos ir kontaktų komponentus. Norėdami naršyti tarp šių komponentų, naudosime „React Router“.
npx sukurti-reaguoti-programą
Jūsų kūrimo aplinka yra paruošta. Įdiegkime „React Router“ savo programoje.
Reaguoti maršrutizatorius : React Router gali būti įdiegtas jūsų React programoje per npm. Atlikite toliau nurodytus veiksmus, kad nustatytumėte maršrutizatorių savo React programoje:
1 veiksmas: kompaktinis diskas jūsų projekto kataloge, t.y ., java.
2 veiksmas: Norėdami įdiegti „React Router“, naudokite šią komandą:
npm install - -save react-router-dom
Įdiegę „react-router-dom“, pridėkite jo komponentus prie „React“ programos.
rūšiavimo algoritmai sujungia rūšiavimą
React maršrutizatoriaus komponentų pridėjimas:
Pagrindiniai „React Router“ komponentai yra šie:
Užuot važiuojant iš eilės, maršrutai parenkami pagal geriausią atitiktį.
Norėdami pridėti „React Router“ komponentų prie programos, atidarykite projekto katalogą naudojamoje rengyklėje ir eikite į failą app.js. Dabar pridėkite toliau pateiktą kodą prie app.js.
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; Pastaba: BrowserRouter yra vadinamas Router.
Naudojant „React Router“: Norėdami naudoti „React Router“, pirmiausia sukurkime kai kuriuos „React“ programos komponentus. Savo projekto kataloge src aplanke sukurkite aplanką pavadinimu komponentai ir dabar į komponentų aplanką pridėkite 3 failus pavadinimu home.js, about.js ir contact.js.
Pridėkime kodą prie mūsų 3 komponentų:
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; Dabar į programą įtraukkime „React Router“ komponentus:
BrowserRouter : Pridėkite slapyvardį BrowserRouter kaip maršruto parinktuvą prie failo app.js, kad apvyniotumėte visus kitus komponentus. BrowserRouter yra pagrindinis komponentas ir gali turėti tik vieną antrinį elementą.
class App extends Component { render() { return ( ); } } Nuorodos: Dabar sukurkime mūsų komponentų nuorodas. Nuorodos komponentas naudoja rekvizitus, kad apibūdintų vietą, į kurią nuoroda turėtų būti nukreipta.
<ul> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul>
Dabar paleiskite programą vietiniame pagrindiniame kompiuteryje ir spustelėkite sukurtą nuorodą. Pastebėsite, kad URL adresai keičiasi pagal nuorodos komponento vertę.
Maršrutas : maršruto komponentas padės mums nustatyti ryšį tarp komponento vartotojo sąsajos ir URL. Norėdami įtraukti maršrutą į programą, pridėkite toliau pateiktą kodą prie savo app.js.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Komponentai dabar prijungti, o spustelėjus bet kurią nuorodą bus pateiktas atitinkamas komponentas. Dabar pabandykime suprasti rekvizitus, susijusius su šakniniu komponentu.
lentynų šunys
- Elementas nurodo komponentą, kuris bus pateiktas, jei kelias atitiks.
Pastaba: pagal numatytuosius nustatymus maršrutai apima, o tai reiškia, kad daugiau nei vienas maršruto komponentas gali atitikti URL kelią ir pateikti vienu metu. Jei norime pateikti vieną komponentą, čia turime naudoti maršrutus.
Maršrutai : Norėdami perskaityti vieną komponentą, visus maršrutus apvyniokite komponente Maršrutai.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Perjunkite grupes keliais maršrutais, kartokite juos ir suraskite pirmąjį, atitinkantį kelią. Taigi pateikiamas atitinkamas kelio komponentas.
Čia yra visas mūsų šaltinio kodas, pridėjus visus komponentus:
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> Dabar galite spustelėti nuorodą ir naršyti po skirtingus komponentus. „React Router“ palaiko programos vartotojo sąsają sinchronizuojant su URL.
Galiausiai, mes sėkmingai įdiegėme navigaciją mūsų React programoje naudodami React Router.
A, kuri naudoja HTML5 istorijos API (pushstate, changestate ir popstate įvykius), kad jūsų vartotojo sąsaja būtų sinchronizuota su URL.
pagrindinis pavadinimas: eilutė
Bazinis URL visoms vietoms. Jei programa teikiama iš serverio pakatalogio, norėsite ją nustatyti į tą pakatalogią. Tinkamai suformatuotame pagrindiniame pavadinime turi būti pasvirasis brūkšnys į priekį, bet negali būti pasvirasis brūkšnys.
// renders // renders <a href="tmp//calendar/tomorrow"> ... </a>
getUserConfirmation: func
Funkcija, naudojama navigacijai patvirtinti. Pagal numatytuosius nustatymus naudojamas window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> forceRefresh: bool
Jei tiesa, maršrutizatorius naudos viso puslapio atnaujinimus puslapyje. Galbūt norėsite tai naudoti norėdami imituoti, kaip tradicinė serverio teikiama programa veiktų su viso puslapio atnaujinimu tarp puslapio naršymo.
KeyLength: skaičius
Vietos ilgis. Raktas. Pagal numatytuosius nustatymus 6.
vaikai: mazgas- antrinis elementas, kurį reikia pateikti.
Pastaba: React turite naudoti vieną antrinį elementą, nes pateikimo metodas negali grąžinti daugiau nei vieno elemento. Jei jums reikia daugiau nei vieno elemento, galite pabandyti juos suvynioti į papildomą arba .
A, kuri naudoja URL maišos dalį (t. y. window.location.hash), kad jūsų vartotojo sąsaja būtų sinchronizuota su URL.
Pastaba: maiša nepalaiko istorijos vietos. Raktas arba vieta. valstybė. Ankstesnėse versijose bandėme sumažinti elgesį, tačiau buvo ypatingų atvejų, kurių negalėjome išspręsti. Bet koks kodas ar papildinys, kuriam reikalingas toks elgesys, neveiks.
Kadangi ši technologija skirta palaikyti tik senesnes naršykles, rekomenduojame sukonfigūruoti serverį, kad jis veiktų.
pagrindinis pavadinimas: eilutė
Pagrindinis visų vietovių URL. Tinkamai suformatuoto pagrindinio pavadinimo pradžioje turi būti pasvirasis brūkšnys, bet ne pasvirasis brūkšnys.
// renders <a href="#/calendar/today"> </a>
getUserConfirmation: func
Funkcija, naudojama navigacijai patvirtinti. Pagal numatytuosius nustatymus naudojamas window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> hashType: eilutė
Naudojama koduotė window.location.hash . Galimos vertės yra šios:
mašinraščio foreach
- 'slash' – sukuria maišą, pvz., #/ ir #/sunshine/lollipops
- 'noslash' - # ir #sunshine/Lollipops . kaip maiša sukuria
- „hashbang“ – sukuria „ajax crawlable“ (nenaudojamas „Google“) maišą, pvz., #!/ ir #!/sunshine/lollipops
Pagal numatytuosius nustatymus „pasvirasis brūkšnys“.
vaikai: mazgas
Pateikiamas vienas antrinis elementas.
Suteikia deklaratyvią, prieinamą naršymą jūsų programoje.
About
į: eilutę
Nuorodos vietos eilutės atvaizdavimas sukuriamas derinant vietos kelio pavadinimą, paiešką ir maišos ypatybes.
Objektas, kuris gali turėti bet kurią iš šių savybių:
į: func
Funkcija, kurioje dabartinė vieta perduodama kaip argumentas ir kuri turi grąžinti vietos atvaizdavimą kaip eilutę arba objektą.
({ ...location, pathname: '/courses' })} /> `${location.pathname}?sort=name`} /> pakeisti: bool
Kai tiesa, spustelėjus nuorodą dabartinis įrašas bus pakeistas, o ne pridėtas naujas
entry to the history stack.
vidinė nuoroda: funkc
Nuo React Router 5.1, jei naudojate React 16, jums neturėtų prireikti šio rekvizito, nes mes perduodame nuorodą į pagrindinį . Vietoj to naudokite įprastą nuorodą.
Leidžia pasiekti komponento integruotą nuorod.
{ // `node` refers to the mounted DOM element // or null when unmounted }} /> innerRef: RefObject
Nuo React Router 5.1, jei naudojate React 16, jums neturėtų prireikti šio rekvizito, nes mes persiunčiame nuorodą į pagrindinį . Vietoj to naudokite įprastą nuorodą.
Gaukite pagrindinę komponento nuorodą naudodami React.createRef.
let anchorRef = React.createRef()
komponentas: React.Component
Jei norite naudoti savo navigacijos komponentą, galite tai padaryti perleisdami jį per komponento atramą.
const FancyLink = React.forwardRef(({ navigate, ...props }, ref) => { return ( <a ref="{ref}" {...props} onclick="{handleClick}">💅 {props.children} ) }) </a> Taip pat galite perduoti rekvizitus, kuriuose norėtumėte būti pvz., pavadinimas, ID, klasės pavadinimas ir kt.
Speciali versija pridės stiliaus atributus į pateiktą elementą, jei jis atitiks esamą URL.
About
klasės pavadinimas: eilutė | func
ClassName gali būti eilutė arba funkcija, kuri grąžina eilutę. Jei naudojama funkcija className, nuorodos aktyvi būsena perduodama kaip parametras. Tai naudinga, jei neaktyviai nuorodai norite taikyti tik klasės pavadinimą.
Greatandhra
'nav-link' + (!isActive ? ' unselected' : '') } >
DUK
React Router v6, ActiveClassName bus pašalintas ir turėtumėte naudoti funkciją className, kad pritaikytumėte klasės pavadinimą aktyviems arba neaktyviems NavLink komponentams.
ActiveClassName: eilutė
klasę, kad pateiktų elementą, kai jis aktyvus. Numatytoji klasė yra aktyvi. Jis bus derinamas su klasės pavadinimo rekvizitu.
stilius: objektas | func
stilius gali būti objektas React.CSSSProperties arba funkcija, grąžinanti stiliaus objektą. Jei naudojamas funkcijos stilius, nuorodos aktyvi būsena perduodama kaip parametras.
({ color: isActive ? 'green' : 'blue' })} > React Router v6 aktyvus stilius bus pašalintas ir jūs turite naudoti funkcijos stilių, kad pritaikytumėte eilutinius stilius aktyviems arba neaktyviems „NavLink“ komponentams.
Aktyvus stilius: objektas
Elementui taikomi stiliai, kai jis aktyvus.
<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> griežtas: bool
Jei tiesa, nustatant, ar vieta atitinka dabartinį URL, bus atsižvelgta į vietos kelio pavadinimo pasvirąjį brūkšnį. Daugiau informacijos rasite dokumentacijoje.
Events
isActive: func
Funkcija, skirta pridėti papildomos logikos, siekiant nustatyti, ar nuoroda aktyvi. Tai turėtų būti naudojama, kai norite daugiau nei patikrinti, ar nuorodos kelio pavadinimas sutampa su dabartinio URL kelio pavadinimu.
{ 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 vieta: objektas
isActive Palyginama su dabartine istorijos vieta (dažniausiai dabartiniu naršyklės URL).
arija-srovė: styga
Aktyvioje nuorodoje naudojamo ploto-srovės atributo reikšmė. Galimos vertės yra šios:
- „puslapis“ – naudojamas nuorodai nurodyti puslapių nuorodų rinkinyje
- „Žingsniai“ – naudojamas žingsnio indikatoriaus nuorodai nurodyti etapais pagrįsto proceso metu
- „vieta“ – naudojama vaizdui, kuris vizualiai paryškinamas kaip dabartinis srauto diagramos komponentas, nurodyti
- „data“ – naudojama dabartinei datai kalendoriuje nurodyti
- „laikas“ – naudojamas esamam laikui grafike nurodyti
- 'true' – naudojamas nurodyti, ar NavLink aktyvi
- „false“ – naudojamas siekiant neleisti pagalbinėms technologijoms reaguoti į dabartinę nuorodą (vienas naudojimo atvejis būtų užkirsti kelią kelioms dabartinėms žymoms puslapyje)