React Router is een standaardbibliotheek voor routering in React. Het maakt navigatie mogelijk tussen weergaven van verschillende componenten in een React-applicatie, maakt het mogelijk de browser-URL te wijzigen en houdt de gebruikersinterface gesynchroniseerd met de URL.
Om te begrijpen hoe React Router werkt, gaan we een eenvoudige applicatie voor React maken. De applicatie bevat de componenten Thuis, Over en Contact. We zullen React Router gebruiken om tussen deze componenten te navigeren.
npx create-react-app
Uw ontwikkelomgeving is klaar. Laten we nu React Router in onze applicatie installeren.
Reageer router : React Router kan via npm in uw React-applicatie worden geïnstalleerd. Volg de onderstaande stappen om de router in uw React-applicatie in te stellen:
Stap 1: CD in uw projectmap, d.w.z ., Java.
Stap 2: Gebruik de volgende opdracht om React Router te installeren:
npm install - -save react-router-dom
Na het installeren van react-router-dom voegt u de componenten ervan toe aan uw React-applicatie.
React Router-componenten toevoegen:
De belangrijkste componenten van React Router zijn:
In plaats van op volgorde te reizen, worden routes geselecteerd op basis van de beste match.
Om React Router-componenten aan uw applicatie toe te voegen, opent u uw projectmap in de editor die u gebruikt en gaat u naar het app.js-bestand. Voeg nu de onderstaande code toe aan app.js.
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; Opmerking: BrowserRouter heeft een alias als Router.
React-router gebruiken: Om React Router te gebruiken, maken we eerst enkele componenten in de React-applicatie. Maak in uw projectmap een map met de naam componenten in de map src en voeg nu 3 bestanden toe met de namen home.js, about.js en contact.js in de map componenten.
Laten we wat code toevoegen aan onze 3 componenten:
Thuis.js:
import React from 'react'; function Home (){ return } export default Home; Over.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; Laten we nu de React Router-componenten in de applicatie opnemen:
BrowserRouter : voeg een alias BrowserRouter toe als router aan uw app.js-bestand om alle andere componenten in te pakken. BrowserRouter is een bovenliggende component en kan slechts één onderliggend onderdeel hebben.
class App extends Component { render() { return ( ); } } Links: Laten we nu de koppelingen van onze componenten maken. De component Link gebruikt rekwisieten om de locatie te beschrijven waarnaar de link moet navigeren.
<ul> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul>
Voer nu uw applicatie uit op de lokale host en klik op de gemaakte link. U zult merken dat de URL's veranderen afhankelijk van de waarde van de linkcomponent.
download video van youtube vlc
Route : De routecomponent helpt ons de link tussen de gebruikersinterface van de component en de URL tot stand te brengen. Om de route in de applicatie op te nemen, voegt u de onderstaande code toe aan uw app.js.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> De componenten zijn nu verbonden en als u op een link klikt, wordt het bijbehorende component weergegeven. Laten we nu proberen de rekwisieten te begrijpen die verband houden met de rootcomponent.
- Element verwijst naar de component die wordt weergegeven als het pad overeenkomt.
Opmerking: routes zijn standaard inclusief, wat betekent dat meer dan één routecomponent met een URL-pad kan overeenkomen en tegelijkertijd kan worden weergegeven. Als we één component willen weergeven, moeten we hier routes gebruiken.
Routes : Om één component te lezen, plaatst u alle routes in de component Routes.
laatste trefwoord in Java
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Schakel groepen over meerdere routes, herhaal ze en vind de eerste die overeenkomt met het pad. Zo wordt de overeenkomstige component van het pad weergegeven.
Hier is onze volledige broncode na het toevoegen van alle componenten:
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 kunt u op de link klikken en door de verschillende componenten navigeren. React Router houdt de gebruikersinterface van uw applicatie gesynchroniseerd met de URL.
Ten slotte hebben we met succes navigatie in onze React-applicatie geïmplementeerd met behulp van React Router.
Een die de HTML5-geschiedenis-API (pushstate, Replacestate en popstate-gebeurtenissen) gebruikt om uw gebruikersinterface gesynchroniseerd te houden met de URL.
basisnaam: string
Basis-URL voor alle locaties. Als uw app wordt aangeboden vanuit een submap op uw server, moet u deze in die submap instellen. Een correct geformatteerde basisnaam moet een schuine streep aan het begin bevatten, maar geen schuine streep.
// renders // renders <a href="tmp//calendar/tomorrow"> ... </a>
getUserConfirmation: func
Een functie die u kunt gebruiken om de navigatie te bevestigen. Standaard gebruikt u window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> forceRefresh: bool
Indien waar, zal de router de navigatie op de volledige pagina vernieuwen. Mogelijk wilt u dit gebruiken om te imiteren hoe een traditionele, door de server weergegeven app zou werken met vernieuwingen van de volledige pagina tussen paginanavigatie.
sleutellengte: nummer
De lengte van de locatie. Sleutel. Standaard ingesteld op 6.
kinderen: knooppunt- kindelement dat moet worden weergegeven.
Opmerking: bij React moet u één enkel onderliggend element gebruiken omdat de rendermethode niet meer dan één element kan retourneren. Als je meer dan één element nodig hebt, kun je proberen ze in een extra of .
Een die het hashgedeelte van de URL gebruikt (d.w.z. window.location.hash) om uw gebruikersinterface gesynchroniseerd te houden met de URL.
Let op: de hash ondersteunt geen geschiedenislocatie. Sleutel of locatie. Staat. In eerdere versies probeerden we het gedrag te verminderen, maar er waren randgevallen die we niet konden oplossen. Elke code of plug-in die dit gedrag vereist, zal niet werken.
Omdat deze technologie alleen bedoeld is om oudere browsers te ondersteunen, raden we u aan om in plaats daarvan uw server zo te configureren dat deze ermee werkt.
basisnaam: string
De basis-URL voor alle locaties. Een correct geformatteerde basisnaam moet een leidende slash hebben, maar geen afsluitende slash.
// renders <a href="#/calendar/today"> </a>
getUserConfirmation: func
Een functie die u kunt gebruiken om de navigatie te bevestigen. Standaard gebruikt u window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> hashType: tekenreeks
De codering die wordt gebruikt venster.locatie.hash . Beschikbare waarden zijn:
tekenreeksfuncties in Java
- 'slash' - creëert hashes zoals #/ en #/sunshine/lollipops
- 'noslash' - # en #sunshine/lollipops . zoals hasj ontstaat
- 'hashbang' - maakt 'ajax crawlable' (verouderd door Google) hashes zoals #!/ en #!/sunshine/lollipops
Standaard ingesteld op 'slash'.
kinderen: knooppunt
Eén enkel onderliggend element om te renderen.
Biedt declaratieve, toegankelijke navigatie rond uw applicatie.
About
naar: string
Er wordt een tekenreeksrepresentatie van een linklocatie gemaakt door de padnaam, zoek- en hash-eigenschappen van de locatie te combineren.
Een object dat een van de volgende eigenschappen kan hebben:
naar: func
Een functie waarin de huidige locatie als argument wordt doorgegeven en die de locatierepresentatie als string of object moet retourneren.
({ ...location, pathname: '/courses' })} /> `${location.pathname}?sort=name`} /> vervangen: bol
Indien waar, zal het klikken op de link het huidige item vervangen in plaats van een nieuw item toe te voegen
entry to the history stack.
interne ref: func
Vanaf React Router 5.1 zou je deze prop niet nodig moeten hebben als je React 16 gebruikt, omdat we de ref doorsturen naar de onderliggende . Gebruik in plaats daarvan een normale ref.
Geeft toegang tot de ingebouwde ref. van de component.
{ // `node` refers to the mounted DOM element // or null when unmounted }} /> innerRef: RefObject
Vanaf React Router 5.1 zou je deze prop niet nodig moeten hebben als je React 16 gebruikt, omdat we de ref doorsturen naar de onderliggende . Gebruik in plaats daarvan een normale ref.
Haal de onderliggende referentie van de component op met React.createRef.
let anchorRef = React.createRef()
component: React.Component
Als u uw eigen navigatiecomponent wilt gebruiken, kunt u dit doen door deze door te geven aan de componentprop.
const FancyLink = React.forwardRef(({ navigate, ...props }, ref) => { return ( <a ref="{ref}" {...props} onclick="{handleClick}">💅 {props.children} ) }) </a> Je kunt ook rekwisieten doorgeven die je graag zou willen zien zoals een titel, id, className, etc.
Een speciale versie daarvan voegt stijlkenmerken toe aan het weergegeven element als het overeenkomt met een bestaande URL.
About
klassenaam: string | func
className kan een tekenreeks zijn of een functie die een tekenreeks retourneert. Als de functie className wordt gebruikt, wordt de actieve status van de link doorgegeven als parameter. Dit is handig als u uitsluitend een className wilt toepassen op een inactieve link.
Java-tekenreeks bevat
'nav-link' + (!isActive ? ' unselected' : '') } >
Veelgestelde vragen
In React Router v6 wordt activeClassName verwijderd en moet u de functie className gebruiken om de klassenaam toe te passen op actieve of inactieve NavLink-componenten.
ActiveClassName: Tekenreeks
class om het element te geven wanneer het actief is. De standaard opgegeven klasse is actief. Het zal worden gecombineerd met de classname prop.
stijl: object | func
stijl kan een React.CSSProperties-object zijn of een functie die een stijlobject retourneert. Als de functiestijl wordt gebruikt, wordt de actieve status van de link doorgegeven als parameter.
({ color: isActive ? 'green' : 'blue' })} > In React Router v6 wordt de actieve stijl verwijderd en moet u de functiestijl gebruiken om inline stijlen toe te passen op actieve of inactieve NavLink-componenten.
Actieve stijl: Object
De stijlen die op het element worden toegepast wanneer het actief is.
<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
Als dit waar is, wordt er rekening gehouden met de afsluitende schuine streep op de padnaam van een locatie bij het bepalen of de locatie overeenkomt met de huidige URL. Zie de documentatie voor meer details.
Events
isActief: func
Een functie om extra logica toe te voegen om te bepalen of de link actief is. Dit moet worden gebruikt als u meer wilt doen dan verifiëren dat de padnaam van de link overeenkomt met de padnaam van de huidige 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 locatie: voorwerp
isActive Vergelijkt met de huidige geschiedenislocatie (meestal de huidige browser-URL).
aria-stroom: string
De waarde van het gebiedsstroomattribuut dat op de actieve link wordt gebruikt. Beschikbare waarden zijn:
- 'pagina' - gebruikt om een link aan te geven binnen een reeks pagineringslinks
- 'Stappen' - gebruikt om een link aan te geven binnen de stapindicator voor een stapsgewijs proces
- 'locatie' - gebruikt om een afbeelding aan te duiden die visueel wordt gemarkeerd als het huidige onderdeel van het stroomdiagram
- 'datum' - gebruikt om de huidige datum in de kalender aan te geven
- 'tijd' - gebruikt om de huidige tijd binnen een tijdschema aan te geven
- 'true' - gebruikt om aan te geven of NavLink actief is
- 'false' - gebruikt om te voorkomen dat ondersteunende technologieën reageren op de huidige link (een gebruiksvoorbeeld zou zijn om te voorkomen dat er meerdere gebiedsstroomtags op een pagina staan)