React Router er et standardbibliotek for ruting i React. Den muliggjør navigering mellom visninger fra forskjellige komponenter i en React-applikasjon, lar nettleserens URL endres og holder brukergrensesnittet synkronisert med URL-en.
For å forstå hvordan React Router fungerer, la oss lage en enkel applikasjon for React. Applikasjonen vil inkludere bolig-, om- og kontaktkomponentene. Vi kommer til å bruke React Router for å navigere mellom disse komponentene.
npx create-react-app
Utviklingsmiljøet ditt er klart. La oss nå installere React Router i applikasjonen vår.
Reager Router : React Router kan installeres i din React-applikasjon via npm. Følg trinnene nedenfor for å sette opp ruteren i din React-applikasjon:
Trinn 1: CD i prosjektkatalogen din, dvs ., java.
Trinn 2: Bruk følgende kommando for å installere React Router:
npm install - -save react-router-dom
Etter å ha installert react-router-dom, legg til komponentene i React-applikasjonen din.
Legge til React Router-komponenter:
Hovedkomponentene til React Router er:
I stedet for å krysse i rekkefølge, velges ruter basert på den beste matchen.
For å legge til React Router-komponenter til applikasjonen din, åpne prosjektkatalogen i redigeringsprogrammet du bruker og gå til app.js-filen. Legg nå til koden nedenfor til app.js.
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; Merk: BrowserRouter er kalt ruter.
Bruke React Router: For å bruke React Router, la oss først lage noen komponenter i React-applikasjonen. I prosjektkatalogen din, opprett en mappe kalt komponenter inne i src-mappen og legg nå til 3 filer kalt home.js, about.js og contact.js i komponenter-mappen.
La oss legge til litt kode til våre 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; La oss nå inkludere React Router-komponentene i applikasjonen:
Nettleserruter : Legg til en alias BrowserRouter som en ruter i app.js-filen for å pakke inn alle andre komponenter. BrowserRouter er en overordnet komponent og kan bare ha ett barn.
class App extends Component { render() { return ( ); } } Linker: La oss nå lage koblingene til komponentene våre. Link-komponenten bruker rekvisitter for å beskrive stedet som koblingen skal navigere til.
<ul> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul>
Kjør applikasjonen din på den lokale verten og klikk på koblingen som er opprettet. Du vil legge merke til at URL-ene endres i henhold til verdien av koblingskomponenten.
Rute : Rutekomponenten vil hjelpe oss med å etablere koblingen mellom komponentens brukergrensesnitt og URL-en. For å inkludere ruten i applikasjonen, legg til koden nedenfor i app.js.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Komponentene er nå koblet til, og ved å klikke på en hvilken som helst kobling vil den tilsvarende komponenten gjengis. La oss nå prøve å forstå rekvisittene knyttet til rotkomponenten.
- Element refererer til komponenten som vil gjengi hvis banen samsvarer.
Merk: Som standard er ruter inkluderende, noe som betyr at mer enn én rutekomponent kan matche en URL-bane og gjengi samtidig. Hvis vi ønsker å gjengi en enkelt komponent, må vi bruke ruter her.
Ruter : For å lese en enkelt komponent, pakk alle ruter inne i ruter-komponenten.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Bytt grupper på tvers av flere ruter, gjenta dem og finn den første som passer til banen. Dermed blir den tilsvarende komponenten av banen gjengitt.
Her er hele kildekoden vår etter å ha lagt til alle komponentene:
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> Nå kan du klikke på lenken og navigere i de forskjellige komponentene. React Router holder applikasjonens brukergrensesnitt synkronisert med URL-en.
Endelig har vi implementert navigasjon i vår React-applikasjon med React Router.
En som bruker HTML5 History API (pushstate-, replacestate- og popstate-hendelser) for å holde brukergrensesnittet ditt synkronisert med URL-en.
java array dynamisk
basenavn: streng
Basis URL for alle steder. Hvis appen din serveres fra en underkatalog på serveren din, vil du sette den til den underkatalogen. Et riktig formatert basenavn må inneholde en innledende skråstrek, men ingen etterfølgende skråstrek.
// renders // renders <a href="tmp//calendar/tomorrow"> ... </a>
getUserConfirmation: func
En funksjon som skal brukes for å bekrefte navigering. Bruker som standard window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> forceRefresh: bool
Hvis dette er sant, vil ruteren bruke helsides oppdateringer på sidenavigasjon. Det kan være lurt å bruke dette til å imitere hvordan en tradisjonell server-gjengitt app ville fungere med helsideoppdateringer mellom sidenavigering.
keyLength: nummer
Lengden på plassering. Nøkkel. Standard er 6.
barn: node- underordnet element å gjengi.
Merk: På React må du bruke et enkelt underordnet element fordi gjengivelsesmetoden ikke kan returnere mer enn ett element. Hvis du trenger mer enn ett element, kan du prøve å pakke dem inn i en ekstra eller .
A som bruker hash-delen av URL-en (dvs. window.location.hash) for å holde brukergrensesnittet ditt synkronisert med URL-en.
Merk: hashen støtter ikke historikkplassering. Nøkkel eller plassering. Stat. I tidligere versjoner prøvde vi å redusere atferden, men det var kantsaker som vi ikke kunne løse. Enhver kode eller plugin som krever denne oppførselen vil ikke fungere.
Siden denne teknologien kun er ment å støtte eldre nettlesere, oppfordrer vi deg til å konfigurere serveren til å fungere med i stedet.
basenavn: streng
Grunnadressen for alle plasseringer. Et riktig formatert basenavn skal ha en innledende skråstrek, men ingen etterfølgende skråstrek.
// renders <a href="#/calendar/today"> </a>
getUserConfirmation: func
En funksjon som skal brukes for å bekrefte navigering. Bruker som standard window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> hashType: streng
Kodingen som brukes til window.location.hash . Tilgjengelige verdier er:
- 'slash' - lager hashes som #/ og #/sunshine/lollipops
- 'noslash' - # og #sunshine/lollipops . som hasj skaper
- 'hashbang' - lager 'ajax crawlable' (avviklet av google) hashes som #!/ og #!/sunshine/lollipops
Standard er 'slash'.
barn: node
Et enkelt underordnet element å gjengi.
Gir deklarativ, tilgjengelig navigasjon rundt applikasjonen din.
About
til: streng
En strengrepresentasjon av en koblingsplassering opprettes ved å kombinere stedets banenavn, søke- og hashegenskaper.
Et objekt som kan ha en av følgende egenskaper:
til: func
En funksjon der gjeldende plassering sendes som et argument og som må returnere plasseringsrepresentasjonen som en streng eller et objekt.
({ ...location, pathname: '/courses' })} /> `${location.pathname}?sort=name`} /> erstatte: bool
Når det er sant, vil et klikk på koblingen erstatte gjeldende oppføring i stedet for å legge til en ny
entry to the history stack.
intern ref: func
Fra og med React Router 5.1, hvis du bruker React 16, bør du ikke trenge denne rekvisitten da vi videresender ref til den underliggende . Bruk en vanlig ref i stedet.
Gir tilgang til komponentens innebygde ref.
{ // `node` refers to the mounted DOM element // or null when unmounted }} /> innerRef: RefObject
ups i java
Fra og med React Router 5.1, hvis du bruker React 16, bør du ikke trenge denne rekvisitten fordi vi videresender referenten til den underliggende . Bruk en vanlig ref i stedet.
Få den underliggende refen til komponenten ved å bruke React.createRef.
let anchorRef = React.createRef()
komponent: React.Component
Hvis du vil bruke din egen navigasjonskomponent, kan du gjøre det ved å sende den gjennom komponenten.
const FancyLink = React.forwardRef(({ navigate, ...props }, ref) => { return ( <a ref="{ref}" {...props} onclick="{handleClick}">💅 {props.children} ) }) </a> Du kan også sende rekvisitter du vil være med på for eksempel en tittel, id, klassenavn osv.
En spesiell versjon av det vil legge til stilattributter til det gjengitte elementet hvis det samsvarer med en eksisterende URL.
About
klassenavn: streng | func
className kan enten være en streng eller en funksjon som returnerer en streng. Hvis funksjonen klassenavn brukes, sendes lenkens aktive tilstand som en parameter. Dette er nyttig hvis du utelukkende vil bruke et klassenavn på en inaktiv lenke.
'nav-link' + (!isActive ? ' unselected' : '') } >
Vanlige spørsmål
I React Router v6 vil activeClassName bli fjernet, og du bør bruke funksjonen className for å bruke klassenavnet på aktive eller inaktive NavLink-komponenter.
ActiveClassName: String
klasse for å gi elementet når det er aktivt. Standard gitt klasse er aktiv. Det vil bli kombinert med klassenavnet rekvisitt.
stil: objekt | func
stil kan enten være et React.CSSProperties-objekt eller en funksjon som returnerer et stilobjekt. Hvis funksjonsstilen brukes, sendes lenkens aktive tilstand som en parameter.
({ color: isActive ? 'green' : 'blue' })} > I React Router v6 vil den aktive stylingen bli fjernet, og du må bruke funksjonsstilen for å bruke innebygde stiler på aktive eller inaktive NavLink-komponenter.
Aktiv stil: Objekt
Stilene som brukes 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 dette er sant, vil den etterfølgende skråstreken på et steds banenavn bli vurdert når det skal avgjøres om plasseringen samsvarer med gjeldende URL. Se dokumentasjonen for flere detaljer.
Events
isActive: func
En funksjon for å legge til ekstra logikk for å avgjøre om koblingen er aktiv. Dette bør brukes når du vil gjøre mer enn å bekrefte at banenavnet til koblingen samsvarer med banenavnet til gjeldende 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 plassering: objekt
isActive Sammenligner med gjeldende historikkplassering (vanligvis gjeldende nettleser-URL).
aria-strøm: streng
Verdien av area-current-attributtet som brukes på den aktive koblingen. Tilgjengelige verdier er:
- 'side' - brukes til å indikere en lenke i et sett med pagineringslenker
- 'Trinn' - brukes til å indikere en kobling i trinnindikatoren for en trinnbasert prosess
- 'location' - brukes til å indikere et bilde som er visuelt uthevet som gjeldende komponent i flytskjemaet
- 'dato' - brukes til å indikere gjeldende dato i kalenderen
- 'tid' - brukes til å angi gjeldende tid innenfor en tidsplan
- 'true' - brukes til å indikere om NavLink er aktiv
- 'false' - brukes til å forhindre at hjelpeteknologier reagerer på gjeldende kobling (ett bruks tilfelle vil være å forhindre flere områdeaktuelle tagger på en side)