React Router är ett standardbibliotek för routing i React. Det möjliggör navigering mellan vyer från olika komponenter i en React-applikation, tillåter att webbläsarens URL ändras och håller användargränssnittet synkroniserat med URL:en.
För att förstå hur React Router fungerar, låt oss skapa en enkel applikation för React. Ansökan kommer att innehålla komponenterna hem, om och kontakt. Vi kommer att använda React Router för att navigera mellan dessa komponenter.
npx create-react-app
Din utvecklingsmiljö är redo. Låt oss nu installera React Router i vår applikation.
varg eller räv
Reager Router : React Router kan installeras i din React-applikation via npm. Följ stegen nedan för att ställa in routern i din React-applikation:
Steg 1: CD i din projektkatalog, dvs ., java.
Steg 2: Använd följande kommando för att installera React Router:
npm install - -save react-router-dom
Efter att ha installerat react-router-dom, lägg till dess komponenter i din React-applikation.
Lägga till React Router-komponenter:
Huvudkomponenterna i React Router är:
Istället för att korsa i sekvens väljs rutter baserat på den bästa matchningen.
För att lägga till React Router-komponenter till din applikation, öppna din projektkatalog i redigeraren du använder och gå till filen app.js. Lägg nu till koden nedan i app.js.
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; Obs: BrowserRouter är alias som router.
Använda React Router: För att använda React Router, låt oss först skapa några komponenter i React-applikationen. Skapa en mapp med namnet komponenter i src-mappen i din projektkatalog och lägg nu till 3 filer med namnet home.js, about.js och contact.js i komponentmappen.
Låt oss lägga till lite kod till våra tre 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; Låt oss nu inkludera React Router-komponenterna i applikationen:
BrowserRouter : Lägg till en alias BrowserRouter som en router till din app.js-fil för att omsluta alla andra komponenter. BrowserRouter är en överordnad komponent och kan bara ha ett underordnat.
class App extends Component { render() { return ( ); } } Länkar: Låt oss nu skapa länkarna till våra komponenter. Länkkomponenten använder rekvisita för att beskriva platsen dit länken ska navigera.
<ul> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul>
Kör nu din applikation på den lokala värden och klicka på länken som skapats. Du kommer att märka att webbadresserna ändras beroende på värdet på länkkomponenten.
Rutt : Ruttkomponenten hjälper oss att upprätta länken mellan komponentens användargränssnitt och URL:en. För att inkludera rutten i applikationen, lägg till koden nedan i din app.js.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Komponenterna är nu anslutna, och om du klickar på en länk visas motsvarande komponent. Låt oss nu försöka förstå rekvisita som är förknippade med rotkomponenten.
- Element hänvisar till den komponent som kommer att rendera om sökvägen matchar.
Obs! Som standard är rutter inklusive, vilket innebär att mer än en ruttkomponent kan matcha en URL-sökväg och renderas samtidigt. Om vi vill rendera en enskild komponent måste vi använda rutter här.
Rutter : För att läsa en enskild komponent, linda alla rutter inuti komponenten Rutter.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Byt grupp över flera rutter, iterera över dem och hitta den första som matchar vägen. Således återges motsvarande komponent i banan.
Här är vår fullständiga källkod efter att ha lagt till alla komponenter:
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 klicka på länken och navigera mellan de olika komponenterna. React Router håller ditt applikationsgränssnitt synkroniserat med URL:en.
Slutligen har vi framgångsrikt implementerat navigering i vår React-applikation med hjälp av React Router.
En som använder HTML5 History API (pushstate, replacestate och popstate-händelser) för att hålla ditt användargränssnitt synkroniserat med URL:en.
basnamn: sträng
Bas-URL för alla platser. Om din app serveras från en underkatalog på din server, vill du ställa in den på den underkatalogen. Ett korrekt formaterat basnamn måste innehålla ett inledande snedstreck, men inget snedstreck.
vad är viloläge
// renders // renders <a href="tmp//calendar/tomorrow"> ... </a>
getUserConfirmation: func
En funktion att använda för att bekräfta navigering. Standard för att använda window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> forceRefresh: bool
Om sant, kommer routern att använda helsidesuppdateringar på sidan navigering. Du kanske vill använda detta för att imitera hur en traditionell server-renderad app skulle fungera med helsidesuppdateringar mellan sidnavigering.
keyLength: nummer
Platsens längd. Nyckel. Standard är 6.
barn: nod- underordnat element att återge.
Obs: På React måste du använda ett enda underordnat element eftersom renderingsmetoden inte kan returnera mer än ett element. Om du behöver mer än ett element kan du prova att slå in dem i en extra eller .
En som använder hash-delen av URL:en (dvs. window.location.hash) för att hålla ditt användargränssnitt synkroniserat med URL:en.
Obs: hashen stöder inte platshistorik. Nyckel eller plats. Stat. I tidigare versioner försökte vi minska beteendet, men det fanns kantfall som vi inte kunde lösa. Någon kod eller plugin som kräver detta beteende kommer inte att fungera.
Eftersom den här tekniken är avsedd att endast stödja äldre webbläsare rekommenderar vi att du konfigurerar din server så att den fungerar med istället.
basnamn: sträng
Grundwebbadressen för alla platser. Ett korrekt formaterat basnamn ska ha ett inledande snedstreck, men inget snedstreck.
// renders <a href="#/calendar/today"> </a>
getUserConfirmation: func
En funktion att använda för att bekräfta navigering. Standard för att använda window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> hashType: sträng
Kodningen som används för fönster.plats.hash . Tillgängliga värden är:
java-operatör
- 'slash' - skapar hash som #/ och #/sunshine/lollipops
- 'noslash' - # och #sunshine/lollipops . som hash skapar
- 'hashbang' - skapar 'ajax crawlable' (utfasad av google) hash som #!/ och #!/sunshine/lollipops
Standardinställningen är 'slash'.
barn: nod
Ett enda underordnat element att rendera.
Ger deklarativ, tillgänglig navigering runt din applikation.
About
att stränga
En strängrepresentation av en länkplats skapas genom att kombinera platsens sökvägsnamn, sök- och hashegenskaper.
Ett objekt som kan ha någon av följande egenskaper:
till: func
En funktion där den aktuella platsen skickas som ett argument och som måste returnera platsrepresentationen som en sträng eller ett objekt.
({ ...location, pathname: '/courses' })} /> `${location.pathname}?sort=name`} /> byt ut: bool
När det är sant kommer att klicka på länken att ersätta den aktuella posten istället för att lägga till en ny
entry to the history stack.
intern ref: func
Från och med React Router 5.1, om du använder React 16, bör du inte behöva denna rekvisita eftersom vi vidarebefordrar refen till den underliggande . Använd en vanlig ref istället.
Ger tillgång till komponentens inbyggda ref.
{ // `node` refers to the mounted DOM element // or null when unmounted }} /> innerRef: RefObject
Från och med React Router 5.1, om du använder React 16, bör du inte behöva denna rekvisita eftersom vi vidarebefordrar refen till den underliggande . Använd en vanlig ref istället.
Få den underliggande refen för komponenten med React.createRef.
let anchorRef = React.createRef()
komponent: React.Component
Om du vill använda din egen navigeringskomponent kan du göra det genom att skicka den genom komponentens rekvisita.
const FancyLink = React.forwardRef(({ navigate, ...props }, ref) => { return ( <a ref="{ref}" {...props} onclick="{handleClick}">💅 {props.children} ) }) </a> Du kan också skicka rekvisita som du vill vara med på såsom en titel, id, klassnamn, etc.
En specialversion av det kommer att lägga till stilattribut till det renderade elementet om det matchar en befintlig URL.
About
className: sträng | func
className kan antingen vara en sträng eller en funktion som returnerar en sträng. Om funktionen className används skickas länkens aktiva tillstånd som en parameter. Detta är användbart om du exklusivt vill tillämpa ett klassnamn på en inaktiv länk.
java karta
'nav-link' + (!isActive ? ' unselected' : '') } >
Vanliga frågor
I React Router v6 kommer activeClassName att tas bort och du bör använda funktionen className för att tillämpa klassnamnet på aktiva eller inaktiva NavLink-komponenter.
ActiveClassName: String
klass för att ge elementet när det är aktivt. Den förinställda klassen är aktiv. Det kommer att kombineras med klassnamnet rekvisita.
stil: objekt | func
stil kan antingen vara ett React.CSSProperties-objekt eller en funktion som returnerar ett stilobjekt. Om funktionsstilen används skickas länkens aktiva tillstånd som en parameter.
({ color: isActive ? 'green' : 'blue' })} > I React Router v6 kommer den aktiva stilen att tas bort, och du måste använda funktionsstilen för att tillämpa inline-stilar på aktiva eller inaktiva NavLink-komponenter.
Aktiv stil: Objekt
Stilarna som tillämpas på elementet när det är 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> strikt: bool
Om det är sant kommer det avslutande snedstrecket på en platss sökväg att beaktas när man avgör om platsen matchar den aktuella URL:en. Se dokumentationen för mer information.
Events
isActive: func
En funktion för att lägga till ytterligare logik för att avgöra om länken är aktiv. Detta bör användas när du vill göra mer än att verifiera att sökvägen för länken matchar sökvägen för den aktuella URL:en.
{ 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 plats: objekt
isActive Jämförs med den aktuella historikplatsen (vanligtvis webbläsarens aktuella URL).
aria-ström: sträng
Värdet på area-current-attributet som används på den aktiva länken. Tillgängliga värden är:
- 'sida' - används för att indikera en länk inom en uppsättning sideringslänkar
- 'Steg' - används för att indikera en länk i stegindikatorn för en stegbaserad process
- 'plats' - används för att indikera en bild som är visuellt markerad som den aktuella komponenten i flödesschemat
- 'datum' - används för att ange aktuellt datum i kalendern
- 'tid' - används för att indikera aktuell tid inom en tidtabell
- 'true' - används för att indikera om NavLink är aktivt
- 'falsk' - används för att förhindra att hjälpmedelstekniker reagerar på den aktuella länken (ett användningsfall skulle vara att förhindra flera områdesaktuella taggar på en sida)