React Router ir standarta bibliotēka maršrutēšanai programmā React. Tas nodrošina navigāciju starp skatiem no dažādiem React lietojumprogrammas komponentiem, ļauj mainīt pārlūkprogrammas URL un uztur lietotāja interfeisu sinhronizācijā ar URL.
Lai saprastu, kā darbojas React Router, izveidosim vienkāršu React lietojumprogrammu. Lietojumprogrammā būs iekļauti mājas, informācijas un kontaktu komponenti. Mēs izmantosim React Router, lai pārvietotos starp šiem komponentiem.
npx izveidot-reaģēt-lietotni
Jūsu izstrādes vide ir gatava. Tagad savā lietojumprogrammā instalēsim React Router.
Reaģēt maršrutētāju : React Router var instalēt jūsu React lietojumprogrammā, izmantojot npm. Lai lietojumprogrammā React iestatītu maršrutētāju, veiciet tālāk norādītās darbības.
1. darbība: CD jūsu projekta direktorijā, t.i ., java.
2. darbība: izmantojiet šo komandu, lai instalētu React Router:
npm install - -save react-router-dom
Pēc react-router-dom instalēšanas pievienojiet tās komponentus savai React lietojumprogrammai.
virkņu masīvs
React maršrutētāja komponentu pievienošana:
Galvenās React Router sastāvdaļas ir:
Tā vietā, lai brauktu secīgi, maršruti tiek atlasīti, pamatojoties uz vislabāko atbilstību.
Lai savai lietojumprogrammai pievienotu React Router komponentus, izmantotajā redaktorā atveriet projekta direktoriju un atveriet failu app.js. Tagad pievienojiet tālāk norādīto kodu failam app.js.
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; Piezīme: BrowserRouter tiek dēvēts par maršrutētāju.
Izmantojot React maršrutētāju: Lai izmantotu React Router, vispirms lietojumprogrammā React izveidosim dažus komponentus. Sava projekta direktorijā src mapē izveidojiet mapi ar nosaukumu komponenti un tagad komponentu mapē pievienojiet 3 failus ar nosaukumu home.js, about.js un contact.js.
Pievienosim kodu mūsu 3 komponentiem:
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; Tagad lietojumprogrammā iekļausim React Router komponentus:
BrowserRouter : pievienojiet aizstājvārdu BrowserRouter kā maršrutētāju savam app.js failam, lai aptvertu visus pārējos komponentus. BrowserRouter ir vecāku komponents, un tam var būt tikai viens bērns.
class App extends Component { render() { return ( ); } } Saites: Tagad izveidosim mūsu komponentu saites. Saites komponents izmanto rekvizītus, lai aprakstītu vietu, uz kuru saitei jāpārvietojas.
<ul> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul>
Tagad palaidiet lietojumprogrammu vietējā resursdatorā un noklikšķiniet uz izveidotās saites. Jūs ievērosiet, ka URL mainās atkarībā no saites komponenta vērtības.
Maršruts : maršruta komponents palīdzēs mums izveidot saikni starp komponenta lietotāja interfeisu un URL. Lai lietojumprogrammā iekļautu maršrutu, pievienojiet tālāk norādīto kodu savam app.js.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Komponenti tagad ir savienoti, un, noklikšķinot uz jebkuras saites, tiks parādīts atbilstošais komponents. Mēģināsim tagad izprast ar saknes komponentu saistītos rekvizītus.
- Elements attiecas uz komponentu, kas tiks renderēts, ja ceļš sakrīt.
Piezīme. Pēc noklusējuma maršruti ir iekļauti, kas nozīmē, ka vairāk nekā viens maršruta komponents var atbilst URL ceļam un vienlaikus tiek renderēts. Ja mēs vēlamies atveidot vienu komponentu, mums šeit ir jāizmanto maršruti.
Maršruti : lai lasītu vienu komponentu, visus maršrutus aptiniet komponentā Routes.
pavasaris un pavasaris mvc
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Pārslēdziet grupas vairākos maršrutos, atkārtojiet tos un atrodiet pirmo, kas atbilst ceļam. Tādējādi tiek atveidota atbilstošā ceļa sastāvdaļa.
Šeit ir mūsu pilns avota kods pēc visu komponentu pievienošanas:
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> Tagad varat noklikšķināt uz saites un pārvietoties pa dažādiem komponentiem. React Router nodrošina jūsu lietojumprogrammas lietotāja interfeisa sinhronizāciju ar URL.
Visbeidzot, mēs esam veiksmīgi ieviesuši navigāciju mūsu React lietojumprogrammā, izmantojot React Router.
A, kas izmanto HTML5 vēstures API (pushstate, aizstājējstāvokļa un popstate notikumus), lai jūsu lietotāja saskarne būtu sinhronizēta ar URL.
pamatnosaukums: virkne
Pamata URL visām atrašanās vietām. Ja jūsu lietotne tiek rādīta no jūsu servera apakšdirektorija, vēlēsities to iestatīt šajā apakšdirektorijā. Pareizi formatētam pamatnosaukumam ir jābūt sākuma slīpsvītrai, bet bez beigu slīpsvītrai.
// renders // renders <a href="tmp//calendar/tomorrow"> ... </a>
getUserConfirmation: func
Funkcija, kas jāizmanto, lai apstiprinātu navigāciju. Pēc noklusējuma tiek izmantots window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> forceRefresh: bool
Ja taisnība, maršrutētājs izmantos visas lapas atsvaidzināšanu lapā. Varat to izmantot, lai atdarinātu, kā tradicionālā servera renderētā lietotne darbotos ar pilnas lapas atsvaidzināšanu starp lapas navigāciju.
KeyLength: numurs
Atrašanās vietas garums. Atslēga. Pēc noklusējuma uz 6.
bērni: mezgls- atveidojamais bērna elements.
Piezīme. Izmantojot React, ir jāizmanto viens pakārtotais elements, jo renderēšanas metode nevar atgriezt vairāk nekā vienu elementu. Ja jums ir nepieciešams vairāk nekā viens elements, varat mēģināt tos ietīt papildu vai .
A, kas izmanto URL jaucējdaļu (t.i., window.location.hash), lai jūsu lietotāja saskarne būtu sinhronizēta ar URL.
kas ir strops
Piezīme: hash neatbalsta vēstures atrašanās vietu. Atslēga vai atrašanās vieta. Valsts. Iepriekšējās versijās mēs mēģinājām samazināt uzvedību, taču bija malas gadījumi, kurus nevarējām atrisināt. Jebkurš kods vai spraudnis, kam nepieciešama šāda darbība, nedarbosies.
Tā kā šī tehnoloģija ir paredzēta tikai vecāku pārlūkprogrammu atbalstam, mēs iesakām konfigurēt serveri darbam ar to.
pamatnosaukums: virkne
Pamata URL visām atrašanās vietām. Pareizi formatētam pamatnosaukumam ir jābūt slīpsvītrai sākumā, bet bez beigu slīpsvītras.
// renders <a href="#/calendar/today"> </a>
getUserConfirmation: func
Funkcija, kas jāizmanto, lai apstiprinātu navigāciju. Pēc noklusējuma tiek izmantots window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> hashType: virkne
Kodējums, ko izmanto logs.location.hash . Pieejamās vērtības ir:
- 'slīpsvītra' — izveido jaucējzīmes, piemēram, #/ un #/sunshine/lollipops
- 'noslash' — # un #sunshine/lollipops . kā hash rada
- 'hashbang' — izveido 'ajax crawlable' (Google novecojušas) jaucējkodas, piemēram, #!/ un #!/sunshine/lollipops
Pēc noklusējuma ir 'slīpsvītra'.
bērni: mezgls
Atveidojams viens pakārtotais elements.
Nodrošina deklaratīvu, pieejamu navigāciju jūsu lietojumprogrammā.
About
uz: virkni
Saites atrašanās vietas virknes attēlojums tiek izveidots, apvienojot atrašanās vietas ceļa nosaukumu, meklēšanu un jaukšanas rekvizītus.
Objekts, kuram var būt kāda no šīm īpašībām:
uz: func
Funkcija, kurā pašreizējā atrašanās vieta tiek nodota kā arguments un kurai ir jāatgriež atrašanās vietas attēlojums kā virkne vai objekts.
({ ...location, pathname: '/courses' })} /> `${location.pathname}?sort=name`} /> aizstāt: bool
Ja patiess, noklikšķinot uz saites, pašreizējais ieraksts tiks aizstāts, nevis pievienots jauns
entry to the history stack.
iekšējā atsauce: funkcion
Sākot ar React Router 5.1, ja izmantojat React 16, jums nav nepieciešams šis rekvizīts, jo mēs pārsūtām atsauci uz pamatā esošo . Tā vietā izmantojiet parasto atsauci.
Ļauj piekļūt komponenta iebūvētajai ref.
java virkne satur
{ // `node` refers to the mounted DOM element // or null when unmounted }} /> innerRef: RefObject
Sākot ar React Router 5.1, ja izmantojat React 16, jums nav nepieciešams šis atbalsts, jo mēs pārsūtām atsauci uz pamatā esošo . Tā vietā izmantojiet parasto atsauci.
Iegūstiet komponenta pamata atsauci, izmantojot React.createRef.
let anchorRef = React.createRef()
komponents: React.Component
Ja vēlaties izmantot savu navigācijas komponentu, varat to izdarīt, izlaižot to caur komponenta balstu.
const FancyLink = React.forwardRef(({ navigate, ...props }, ref) => { return ( <a ref="{ref}" {...props} onclick="{handleClick}">💅 {props.children} ) }) </a> Varat arī nodot rekvizītus, uz kuriem vēlaties atrasties piemēram, virsraksts, ID, klases nosaukums utt.
Īpašā tā versija renderētajam elementam pievienos stila atribūtus, ja tas atbilst esošam URL.
java pievienot masīvam
About
klases nosaukums: virkne | func
className var būt virkne vai funkcija, kas atgriež virkni. Ja tiek izmantota funkcija className, saites aktīvais stāvoklis tiek nodots kā parametrs. Tas ir noderīgi, ja neaktīvai saitei vēlaties lietot tikai klases nosaukumu.
'nav-link' + (!isActive ? ' unselected' : '') } >
FAQ
Programmā React Router v6 ActiveClassName tiks noņemts, un jums ir jāizmanto funkcija className, lai lietotu klases nosaukumu aktīviem vai neaktīviem NavLink komponentiem.
ActiveClassName: virkne
klase, lai norādītu elementu, kad tas ir aktīvs. Noklusējuma dotā klase ir aktīva. Tas tiks apvienots ar klases nosaukuma rekvizītu.
stils: objekts | func
stils var būt React.CSSSProperties objekts vai funkcija, kas atgriež stila objektu. Ja tiek izmantots funkcijas stils, saites aktīvais stāvoklis tiek nodots kā parametrs.
({ color: isActive ? 'green' : 'blue' })} > Programmā React Router v6 aktīvais stils tiks noņemts, un jums ir jāizmanto funkciju stils, lai lietotu iekļautos stilus aktīvajiem vai neaktīvajiem NavLink komponentiem.
Aktīvais stils: objekts
Elementam piemērotie stili, kad tas ir aktīvs.
<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> stingrs: bool
Ja patiess, tad, nosakot, vai atrašanās vieta atbilst pašreizējam URL, tiks ņemta vērā atrašanās vietas ceļa nosaukuma beigu slīpsvītra. Plašāku informāciju skatiet dokumentācijā.
Events
isActive: funkcion
Funkcija, lai pievienotu papildu loģiku, lai noteiktu, vai saite ir aktīva. Tas ir jāizmanto, ja vēlaties darīt vairāk, nekā pārbaudīt, vai saites ceļa nosaukums atbilst pašreizējā URL ceļa nosaukumam.
{ 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: objekts
isActive Salīdzina ar pašreizējo vēstures atrašanās vietu (parasti pašreizējā pārlūkprogrammas URL).
ārija-strāva: virkne
Aktīvā saite izmantotā apgabala pašreizējā atribūta vērtība. Pieejamās vērtības ir:
- 'lapa' — izmanto, lai norādītu saiti lappušu saišu komplektā
- “Soļi” — izmanto, lai norādītu saiti soļu indikatorā soļu procesam
- 'atrašanās vieta' — izmanto, lai norādītu attēlu, kas ir vizuāli izcelts kā plūsmas diagrammas pašreizējā sastāvdaļa
- 'datums' — izmanto, lai norādītu pašreizējo datumu kalendārā
- 'laiks' — izmanto, lai norādītu pašreizējo laiku grafikā
- 'true' — izmanto, lai norādītu, vai NavLink ir aktīvs
- “false” — tiek izmantots, lai neļautu palīgtehnoloģijām reaģēt uz pašreizējo saiti (viens lietošanas gadījums būtu novērst vairākus apgabalā aktuālus tagus lapā)