React Router er et standardbibliotek til routing i React. Det muliggør navigation mellem visninger fra forskellige komponenter i en React-applikation, gør det muligt at ændre browser-URL'en og holder brugergrænsefladen synkroniseret med URL'en.
For at forstå, hvordan React Router fungerer, lad os oprette en simpel applikation til React. Ansøgningen vil inkludere bolig-, om- og kontaktkomponenterne. Vi vil bruge React Router til at navigere mellem disse komponenter.
npx create-react-app
Dit udviklingsmiljø er klar. Lad os nu installere React Router i vores applikation.
Reager Router : React Router kan installeres i din React-applikation via npm. Følg nedenstående trin for at konfigurere routeren i din React-applikation:
Trin 1: CD i dit projektbibliotek, dvs ., java.
Trin 2: Brug følgende kommando til at installere React Router:
npm install - -save react-router-dom
Efter installation af react-router-dom skal du tilføje dens komponenter til din React-applikation.
Tilføjelse af React Router-komponenter:
Hovedkomponenterne i React Router er:
I stedet for at krydse i rækkefølge, vælges ruter baseret på det bedste match.
For at tilføje React Router-komponenter til din applikation skal du åbne din projektmappe i den editor, du bruger, og gå til filen app.js. Tilføj nu nedenstående kode til app.js.
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; Bemærk: BrowserRouter er aliaseret som Router.
Brug af React Router: For at bruge React Router, lad os først oprette nogle komponenter i React-applikationen. I din projektmappe skal du oprette en mappe med navnet komponenter inde i src-mappen og nu tilføje 3 filer med navnet home.js, about.js og contact.js i komponenter-mappen.
Lad os tilføje noget kode til vores 3 komponenter:
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; Lad os nu inkludere React Router-komponenterne i applikationen:
BrowserRouter : Tilføj en BrowserRouter med alias som en router til din app.js-fil for at omslutte alle andre komponenter. BrowserRouter er en overordnet komponent og kan kun have ét underordnet.
class App extends Component { render() { return ( ); } } Links: Lad os nu oprette links til vores komponenter. Link-komponenten bruger rekvisitter til at beskrive den placering, som linket skal navigere til.
<ul> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul>
Kør nu din applikation på den lokale vært og klik på det oprettede link. Du vil bemærke, at URL'erne ændres i henhold til værdien af linkkomponenten.
Rute : Rutekomponenten hjælper os med at etablere forbindelsen mellem komponentens brugergrænseflade og URL'en. For at inkludere ruten i applikationen skal du tilføje nedenstående kode til din app.js.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Komponenterne er nu forbundet, og ved at klikke på et link vil den tilsvarende komponent blive gengivet. Lad os nu prøve at forstå de rekvisitter, der er forbundet med rodkomponenten.
- Element refererer til den komponent, der gengives, hvis stien matcher.
Bemærk: Som standard er ruter inkluderende, hvilket betyder, at mere end én rutekomponent kan matche en URL-sti og gengives samtidigt. Hvis vi ønsker at gengive en enkelt komponent, skal vi bruge ruter her.
Ruter : For at læse en enkelt komponent skal du pakke alle ruter inde i komponenten Ruter.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Skift grupper på tværs af flere ruter, gentag dem og find den første, der matcher stien. Således gengives den tilsvarende komponent af stien.
Her er vores fulde kildekode efter tilføjelse af alle komponenterne:
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> Nu kan du klikke på linket og navigere i de forskellige komponenter. React Router holder din applikations brugergrænseflade synkroniseret med URL'en.
Endelig har vi med succes implementeret navigation i vores React-applikation ved hjælp af React Router.
A, der bruger HTML5 History API (pushstate, replacestate og popstate hændelser) til at holde din UI synkroniseret med URL'en.
java array dynamisk
basenavn: streng
Basis-URL for alle lokationer. Hvis din app serveres fra en undermappe på din server, vil du gerne indstille den til den undermappe. Et korrekt formateret basisnavn skal indeholde en indledende skråstreg, men ingen efterfølgende skråstreg.
// renders // renders <a href="tmp//calendar/tomorrow"> ... </a>
getUserConfirmation: func
En funktion, der skal bruges til at bekræfte navigation. Bruger som standard window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> forceRefresh: bool
Hvis det er sandt, vil routeren bruge helsides opdaterede navigation på siden. Du vil måske bruge dette til at efterligne, hvordan en traditionel server-gengivet app ville fungere med helsides opdateringer mellem sidenavigation.
nøglelængde: nummer
Længden af placering. Nøgle. Standard er 6.
børn: node- underordnet element at gengive.
Bemærk: På React skal du bruge et enkelt underordnet element, fordi gengivelsesmetoden ikke kan returnere mere end ét element. Hvis du har brug for mere end ét element, kan du prøve at pakke dem ind i et ekstra eller .
A, der bruger hash-delen af URL'en (dvs. window.location.hash) til at holde din brugergrænseflade synkroniseret med URL'en.
Bemærk: hashen understøtter ikke historikplacering. Nøgle eller placering. Stat. I tidligere versioner forsøgte vi at reducere adfærden, men der var kantsager, som vi ikke kunne løse. Enhver kode eller plugin, der kræver denne adfærd, virker ikke.
Da denne teknologi kun er beregnet til at understøtte ældre browsere, opfordrer vi dig til at konfigurere din server til at arbejde med i stedet.
basenavn: streng
Basis-URL'en for alle lokationer. Et korrekt formateret basisnavn skal have en indledende skråstreg, men ingen efterfølgende skråstreg.
// renders <a href="#/calendar/today"> </a>
getUserConfirmation: func
En funktion, der skal bruges til at bekræfte navigation. Bruger som standard window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> hashType: streng
Den kodning, der bruges til vindue.placering.hash . Tilgængelige værdier er:
- 'skråstreg' - opretter hashes som #/ og #/sunshine/lollipops
- 'noslash' - # og #sunshine/lollipops . som hash skaber
- 'hashbang' - opretter 'ajax crawlable' (forældet af google) hashes som #!/ og #!/sunshine/lollipops
Standard er 'skråstreg'.
børn: node
Et enkelt underordnet element at gengive.
Giver deklarativ, tilgængelig navigation omkring din applikation.
About
til: streng
En strengrepræsentation af en linkplacering oprettes ved at kombinere lokationens stinavn, søge- og hashegenskaber.
Et objekt, der kan have en af følgende egenskaber:
til: func
En funktion, hvor den aktuelle placering sendes som et argument, og som skal returnere placeringsrepræsentationen som en streng eller et objekt.
({ ...location, pathname: '/courses' })} /> `${location.pathname}?sort=name`} /> erstatte: bool
Når det er sandt, vil et klik på linket erstatte den aktuelle post i stedet for at tilføje en ny
entry to the history stack.
intern ref: func
Fra React Router 5.1, hvis du bruger React 16, skulle du ikke have brug for denne rekvisit, da vi videresender referenten til den underliggende . Brug en normal ref i stedet.
Giver adgang til komponentens indbyggede ref.
{ // `node` refers to the mounted DOM element // or null when unmounted }} /> indreRef: RefObject
ups i java
Fra React Router 5.1, hvis du bruger React 16, skulle du ikke have brug for denne rekvisit, fordi vi videresender ref til den underliggende . Brug en normal ref i stedet.
Hent den underliggende ref for komponenten ved hjælp af React.createRef.
let anchorRef = React.createRef()
komponent: React.Component
Hvis du gerne vil bruge din egen navigationskomponent, kan du gøre det ved at føre den gennem komponenten.
const FancyLink = React.forwardRef(({ navigate, ...props }, ref) => { return ( <a ref="{ref}" {...props} onclick="{handleClick}">💅 {props.children} ) }) </a> Du kan også videregive rekvisitter, du gerne vil være med på såsom en titel, id, klassenavn osv.
En speciel version af det vil tilføje styling-attributter til det gengivne element, hvis det matcher en eksisterende URL.
About
klassenavn: streng | func
klassenavn kan enten være en streng eller en funktion, der returnerer en streng. Hvis funktionen klassenavn bruges, videregives linkets aktive tilstand som en parameter. Dette er nyttigt, hvis du udelukkende vil anvende et klassenavn på et inaktivt link.
'nav-link' + (!isActive ? ' unselected' : '') } >
Ofte stillede spørgsmål
I React Router v6 vil activeClassName blive fjernet, og du skal bruge funktionen className til at anvende klassenavnet på aktive eller inaktive NavLink-komponenter.
ActiveClassName: Streng
klasse for at give elementet, når det er aktivt. Standardklassen er aktiv. Det vil blive kombineret med klassenavnet prop.
stil: objekt | func
stil kan enten være et React.CSSProperties-objekt eller en funktion, der returnerer et stilobjekt. Hvis funktionsstilen bruges, overføres linkets aktive tilstand som en parameter.
({ color: isActive ? 'green' : 'blue' })} > I React Router v6 vil den aktive styling blive fjernet, og du skal bruge funktionsstilen til at anvende inline-stile til aktive eller inaktive NavLink-komponenter.
Aktiv stil: Objekt
De stilarter, der anvendes på elementet, når det er aktivt.
<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> streng: bool
Hvis det er sandt, vil den efterfølgende skråstreg på en placerings stinavn blive taget i betragtning, når det bestemmes, om placeringen matcher den aktuelle URL. Se dokumentationen for flere detaljer.
Events
er Aktiv: func
En funktion til at tilføje yderligere logik for at bestemme, om linket er aktivt. Dette skal bruges, når du vil gøre mere end at verificere, at stinavnet på linket matcher stinavnet på den aktuelle URL.
{ 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 placering: objekt
isActive Sammenligner med den aktuelle historikplacering (normalt den aktuelle browser-URL).
aria-aktuel: streng
Værdien af area-current-attributten, der bruges på det aktive link. Tilgængelige værdier er:
- 'side' - bruges til at angive et link i et sæt pagineringslinks
- 'Trin' - bruges til at angive et link i trinindikatoren for en trinbaseret proces
- 'placering' - bruges til at angive et billede, der er visuelt fremhævet som den aktuelle komponent i rutediagrammet
- 'dato' - bruges til at angive den aktuelle dato i kalenderen
- 'tid' - bruges til at angive det aktuelle tidspunkt inden for en tidsplan
- 'sand' - bruges til at angive, om NavLink er aktiv
- 'falsk' - bruges til at forhindre hjælpeteknologier i at reagere på det aktuelle link (et tilfælde ville være at forhindre flere områdeaktuelle tags på en side)