React Router è una libreria standard per il routing in React. Abilita la navigazione tra visualizzazioni di diversi componenti in un'applicazione React, consente di modificare l'URL del browser e mantiene l'interfaccia utente sincronizzata con l'URL.
Per capire come funziona React Router, creiamo una semplice applicazione per React. L'applicazione includerà i componenti Home, Informazioni e Contatti. Utilizzeremo React Router per navigare tra questi componenti.
npx create-react-app
Il tuo ambiente di sviluppo è pronto. Installiamo ora React Router nella nostra applicazione.
Reagisci Router : React Router può essere installato nella tua applicazione React tramite npm. Segui i passaggi seguenti per configurare il router nella tua applicazione React:
Passaggio 1: CD nella directory del progetto, ad es ., Java.
Passaggio 2: utilizzare il comando seguente per installare React Router:
npm installa - -save react-router-dom
fare il ciclo while in Java
Dopo aver installato react-router-dom, aggiungi i suoi componenti alla tua applicazione React.
Aggiunta di componenti del router React:
I componenti principali di React Router sono:
Invece di attraversare in sequenza, i percorsi vengono selezionati in base alla migliore corrispondenza.
Per aggiungere componenti React Router alla tua applicazione, apri la directory del progetto nell'editor che utilizzi e vai al file app.js. Ora aggiungi il codice seguente ad app.js.
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; Nota: BrowserRouter ha l'alias Router.
Utilizzando React Router: Per utilizzare React Router, creiamo prima alcuni componenti nell'applicazione React. Nella directory del tuo progetto, crea una cartella denominata componenti all'interno della cartella src e ora aggiungi 3 file denominati home.js, about.js e contact.js nella cartella componenti.
Aggiungiamo del codice ai nostri 3 componenti:
Home.js:
import React from 'react'; function Home (){ return } export default Home; Informazioni su.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; Ora includiamo i componenti React Router nell'applicazione:
BrowserRouter : aggiungi un BrowserRouter con alias come router al file app.js per racchiudere tutti gli altri componenti. BrowserRouter è un componente principale e può avere un solo figlio.
class App extends Component { render() { return ( ); } } Collegamenti: Creiamo ora i collegamenti dei nostri componenti. Il componente Link utilizza oggetti di scena per descrivere la posizione verso la quale il collegamento dovrebbe navigare.
<ul> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul>
Ora esegui la tua applicazione sull'host locale e fai clic sul collegamento creato. Noterai che gli URL cambiano in base al valore del componente collegamento.
Itinerario : il componente del percorso ci aiuterà a stabilire il collegamento tra l'interfaccia utente del componente e l'URL. Per includere il percorso nell'applicazione, aggiungi il codice seguente al tuo app.js.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> I componenti sono ora collegati e facendo clic su qualsiasi collegamento verrà visualizzato il componente corrispondente. Cerchiamo ora di comprendere le proprietà associate al componente root.
- L'elemento si riferisce al componente di cui verrà eseguito il rendering se il percorso corrisponde.
Nota: per impostazione predefinita, i percorsi sono inclusivi, il che significa che più di un componente del percorso può corrispondere a un percorso URL ed essere visualizzato simultaneamente. Se vogliamo eseguire il rendering di un singolo componente, dobbiamo utilizzare le rotte qui.
Itinerari : per leggere un singolo componente, racchiudere tutte le rotte all'interno del componente Routes.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Cambia gruppi su più percorsi, esegui l'iterazione su di essi e trova il primo che corrisponde al percorso. Pertanto, viene eseguito il rendering del componente corrispondente del percorso.
Ecco il nostro codice sorgente completo dopo aver aggiunto tutti i componenti:
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> Ora puoi fare clic sul collegamento e navigare tra i diversi componenti. React Router mantiene l'interfaccia utente dell'applicazione sincronizzata con l'URL.
Infine, abbiamo implementato con successo la navigazione nella nostra applicazione React utilizzando React Router.
A che utilizza l'API della cronologia HTML5 (eventi pushstate, replacestate e popstate) per mantenere l'interfaccia utente sincronizzata con l'URL.
nome base: stringa
URL di base per tutte le posizioni. Se la tua app viene servita da una sottodirectory sul tuo server, ti consigliamo di impostarla su quella sottodirectory. Un nome base formattato correttamente deve contenere una barra iniziale, ma nessuna barra finale.
// renders // renders <a href="tmp//calendar/tomorrow"> ... </a>
getUserConfirmation: funz
Una funzione da utilizzare per confermare la navigazione. Per impostazione predefinita viene utilizzato window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> forceRefresh: bool
Se vero, il router utilizzerà gli aggiornamenti a pagina intera nella navigazione nella pagina. Potresti volerlo utilizzare per imitare il funzionamento di un'app tradizionale con rendering su server con aggiornamenti dell'intera pagina tra la navigazione della pagina.
lunghezzachiave: numero
La durata della posizione. Chiave. Il valore predefinito è 6.
figli: nodo- elemento figlio da renderizzare.
Nota: su React, devi utilizzare un singolo elemento figlio perché il metodo render non può restituire più di un elemento. Se hai bisogno di più di un elemento, puoi provare a racchiuderli in un file aggiuntivo o .
A che utilizza la parte hash dell'URL (ad esempio window.location.hash) per mantenere la tua interfaccia utente sincronizzata con l'URL.
Nota: l'hash non supporta la posizione della cronologia. Chiave o posizione. Stato. Nelle versioni precedenti abbiamo provato a ridurre il comportamento, ma c'erano casi limite che non siamo riusciti a risolvere. Qualsiasi codice o plugin che richieda questo comportamento non funzionerà.
Poiché questa tecnologia è destinata a supportare solo i browser più vecchi, ti invitiamo a configurare il tuo server affinché funzioni.
nome base: stringa
L'URL di base per tutte le posizioni. Un nome base formattato correttamente dovrebbe avere una barra iniziale, ma nessuna barra finale.
// renders <a href="#/calendar/today"> </a>
getUserConfirmation: funz
Una funzione da utilizzare per confermare la navigazione. Per impostazione predefinita viene utilizzato window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> hashTipo: stringa
La codifica utilizzata per window.location.hash . I valori disponibili sono:
- 'slash' - crea hash come #/ e #/sunshine/lollipops
- 'noslash' - # e #sunshine/lollipops . come crea l'hashish
- 'hashbang' - crea hash 'ajax crawlable' (deprecato da Google) come #!/ e #!/sunshine/lollipops
Il valore predefinito è 'barra'.
figli: nodo
Un singolo elemento figlio da sottoporre a rendering.
Fornisce una navigazione dichiarativa e accessibile all'interno dell'applicazione.
About
accordare
Una rappresentazione di stringa di una posizione di collegamento viene creata combinando le proprietà del percorso, della ricerca e dell'hash della posizione.
Un oggetto che può avere una delle seguenti proprietà:
a: funz
Una funzione in cui la posizione corrente viene passata come argomento e che deve restituire la rappresentazione della posizione come stringa o oggetto.
({ ...location, pathname: '/courses' })} /> `${location.pathname}?sort=name`} /> sostituire: bool
Quando è vero, facendo clic sul collegamento si sostituirà la voce corrente invece di aggiungerne una nuova
entry to the history stack.
rif. interno: funz
A partire da React Router 5.1, se stai utilizzando React 16, non dovresti aver bisogno di questo prop poiché inoltriamo il riferimento al sottostante . Utilizza invece un rif normale.
aws sns
Consente l'accesso al rif. integrato del componente.
{ // `node` refers to the mounted DOM element // or null when unmounted }} /> innerRef: RefObject
A partire da React Router 5.1, se stai utilizzando React 16, non dovresti aver bisogno di questa prop perché inoltriamo il riferimento al sottostante . Utilizza invece un rif normale.
Ottieni il riferimento sottostante del componente utilizzando React.createRef.
let anchorRef = React.createRef()
componente: React.Component
Se desideri utilizzare il tuo componente di navigazione, puoi farlo passandolo attraverso il componente prop.
const FancyLink = React.forwardRef(({ navigate, ...props }, ref) => { return ( <a ref="{ref}" {...props} onclick="{handleClick}">💅 {props.children} ) }) </a> Puoi anche passare gli oggetti di scena su cui vorresti essere presente come titolo, ID, className, ecc.
Una versione speciale aggiungerà attributi di stile all'elemento renderizzato se corrisponde a un URL esistente.
About
nomeclasse: stringa | funz
className può essere una stringa o una funzione che restituisce una stringa. Se viene utilizzata la funzione className, lo stato attivo del collegamento viene passato come parametro. Ciò è utile se desideri applicare un className esclusivamente a un collegamento inattivo.
'nav-link' + (!isActive ? ' unselected' : '') } >
Domande frequenti
In React Router v6, activeClassName verrà rimosso e dovrai utilizzare la funzione className per applicare il nome classe ai componenti NavLink attivi o inattivi.
ActiveClassName: stringa
class per fornire l'elemento quando è attivo. La classe predefinita è attiva. Verrà combinato con la prop classname.
stile: oggetto | funz
style può essere un oggetto React.CSSProperties o una funzione che restituisce un oggetto stile. Se viene utilizzato lo stile della funzione, lo stato attivo del collegamento viene passato come parametro.
({ color: isActive ? 'green' : 'blue' })} > In React Router v6, lo stile attivo verrà rimosso e sarà necessario utilizzare lo stile funzione per applicare stili in linea ai componenti NavLink attivi o inattivi.
Stile attivo: Oggetto
Gli stili applicati all'elemento quando è attivo.
<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> rigoroso: bool
Se vero, la barra finale sul nome del percorso di una posizione verrà presa in considerazione per determinare se la posizione corrisponde all'URL corrente. Consulta la documentazione per maggiori dettagli.
Events
è attivo: funz
Una funzione per aggiungere ulteriore logica per determinare se il collegamento è attivo. Dovrebbe essere utilizzato quando vuoi fare di più che verificare che il percorso del collegamento corrisponda al percorso dell'URL corrente.
{ 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 ubicazione: oggetto
isActive Confronta la posizione corrente della cronologia (solitamente l'URL del browser corrente).
aria-corrente: stringa
Il valore dell'attributo area-current utilizzato sul collegamento attivo. I valori disponibili sono:
- 'pagina' - utilizzato per indicare un collegamento all'interno di un insieme di collegamenti di impaginazione
- 'Passi': utilizzato per indicare un collegamento all'interno dell'indicatore dei passaggi per un processo basato su passaggi
- 'posizione' - utilizzata per indicare un'immagine visivamente evidenziata come componente corrente del diagramma di flusso
- 'data' - utilizzato per indicare la data corrente all'interno del calendario
- 'time' - utilizzato per indicare l'ora corrente all'interno di un orario
- 'true' - utilizzato per indicare se NavLink è attivo
- 'false' - utilizzato per impedire alle tecnologie assistive di reagire al collegamento corrente (un caso d'uso sarebbe quello di impedire più tag area-current su una pagina)