Una Single Page Application (SPA) è un sito Web o un'applicazione Web che riscrive dinamicamente una pagina Web esistente con nuove informazioni dal server Web.

In un'applicazione React, i componenti recuperano il contenuto del sito e lo rendono in un singolo file HTML nel tuo progetto.

React Router ti aiuta a navigare verso il componente di tua scelta e lo rende nel file HTML. Per usarlo, devi sapere come configurare e integrare React Router con la tua applicazione React.

Come installare il router React

Per installare React Router nel tuo progetto React usando npm, il gestore di pacchetti JavaScript, eseguire il seguente comando nella directory del progetto:

npm reagisco-router-dom

In alternativa, puoi scaricare il pacchetto utilizzando Yarn, un gestore di pacchetti che ti consente di installare i pacchetti di librerie offline.

Per installare React Router usando Yarn, esegui questo comando:

filato aggiungere reagire-router-dom@6

Configurazione del router React

Per configurare React Router e renderlo disponibile nella tua applicazione, importa BrowserRouter da reagisci-router-dom dentro il tuo index.js file, quindi avvolgere il componente dell'app nel file BrowserRouter elemento:

importare Reagire da'reagire';
importare Reagire DOM da'react-dom/cliente'; 
importare App da'./App';
importare {BrowserRouter} da'reagire-router-dom';
cost root = ReactDOM.createRoot( documento.getElementById('radice') );
root.render(


 </BrowserRouter>
);

Avvolgimento del componente dell'app nel file BrowserRouter L'elemento offre all'intera app pieno accesso alle capacità del router.

Instradamento ad altri componenti

Dopo aver configurato il router nella tua applicazione, dovresti andare avanti e creare i componenti della tua app, instradarli e renderizzarli. Il codice seguente importa e crea componenti denominati "Home", "About" e "Blog". Importa anche il file Itinerario E Itinerari elementi da reagisci-router-dom.

Definirai i tuoi percorsi all'interno del App componente:

importare { Percorsi, Percorso } da'reagire-router-dom';
importare Casa da'./Casa';
importare Di da'./Di';
importare Blog da'./Blog';
funzioneApp() {
ritorno (

'/' elemento={ } />
'/Di' elemento={ } />
'/blog' elemento={ }/>
 </Routes>
 )
}
esportarepredefinito Applicazione;

IL App component è il componente principale che esegue il rendering di tutto il codice che hai scritto negli altri componenti.

IL Itinerari element è l'elemento padre che avvolge i singoli percorsi che crei nel componente dell'app. IL Itinerario L'elemento crea un singolo percorso. Richiede due attributi prop: a sentiero e un elemento.

IL sentiero L'attributo definisce il percorso URL del componente desiderato. La prima Route nel blocco di codice precedente utilizza una barra rovesciata (/) come percorso. Questo è un percorso speciale che React eseguirà per primo, quindi il file Casa componente esegue il rendering quando si esegue l'applicazione. Non confondere questo sistema con implementando il rendering condizionale nei componenti React. Puoi dare questo sentiero attribuire qualsiasi nome che ti piace.

IL elemento L'attributo definisce il componente che il Itinerario renderà.

IL collegamento component è un componente React Router utilizzato per navigare su percorsi diversi. Questi componenti accedono ai vari percorsi che hai creato.

Per esempio:

importare { Collegamento } da'reagire-router-dom';
funzioneCasa() {
ritorno (



'/Di'>Informazioni sulla pagina</Link>
'/blog'>Pagina del blog</Link>
Questa è la home page
 </div>
 )
}
esportarepredefinito Casa;

IL collegamento componente è quasi identico al tag di ancoraggio HTML, usa solo un attributo chiamato "to" invece di "href". IL collegamento component naviga verso la Route con il percorso corrispondente come attributo e visualizza il componente della Route.

Routing annidato e come implementarlo

React Router supporta il routing nidificato, consentendo di avvolgere più percorsi in un singolo percorso. Viene utilizzato principalmente quando c'è qualche somiglianza nei percorsi URL delle rotte.

Dopo aver creato i componenti che desideri instradare, svilupperai percorsi individuali per ciascuno di essi nel file app componente.

Per esempio:

importare { Percorsi, Percorso } da'reagire-router-dom'; 
importare Articoli da'./Articoli';
importare NuovoArticolo da'./NuovoArticolo';
importare Articolo Uno da'./ArticoloUno';
funzioneApp() {
ritorno (

'/articolo' elemento={ }/>
'/articolo/nuovo' elemento={ }/>
'/Articolo 1' elemento={ }/>
 </Routes>
 )
}
esportarepredefinito Applicazione;

Il blocco di codice sopra importa e instrada i componenti creati Articoli, NuovoArticolo, E Articolo Uno. Ci sono alcune somiglianze nei percorsi URL tra i tre percorsi.

IL NuovoArticolo Il percorso del percorso inizia allo stesso modo del file Articoli Il percorso della rotta, con una barra rovesciata aggiunta (/) e la parola "nuovo", cioè (/nuovo). L'unica differenza tra i nomi di percorso del file Articoli Itinerario e il Articolo Uno Route è la barra (/1) alla fine di Articolo Uno percorso del componente.

Puoi nidificare le tre rotte piuttosto che lasciarle nel loro stato attuale.

Così:

importare { Percorsi, Percorso } da'reagire-router-dom';
importare Articoli da'./Articoli';
importare NuovoArticolo da'./NuovoArticolo';
importare Articolo Uno da'./ArticoloUno';
funzioneApp() {
ritorno (

'/articolo'>
 }/>
'/articolo/nuovo' elemento={ }/>
'/Articolo 1' elemento={ }/>
 </Route>
 </Routes>
 )
}
esportarepredefinito Applicazione;

Hai racchiuso i tre percorsi individuali in un singolo Itinerario elemento. Si noti che il genitore Itinerario L'elemento ha solo il sentiero attributo e n elemento attributo che definisce il componente di cui eseguire il rendering. IL indice attributo nel primo figlio Itinerario L'elemento specifica che this Itinerario esegue il rendering quando si passa al percorso dell'URL del genitore Itinerario.

Per rendere il tuo codice migliore e più gestibile, dovresti definire i tuoi percorsi in un componente e importarli nel file app componente per l'uso.

Per esempio:

importare { Percorsi, Percorso } da'reagire-router-dom';
importare Articoli da'./Articoli';
importare NuovoArticolo da'./NuovoArticolo';
importare Articolo Uno da'./ArticoloUno';
funzioneArticoloPercorsi() {
ritorno (

 }/>
'/articolo/nuovo' elemento={ }/>
'/Articolo 1' elemento={ }/>
 </Routes>
 )
}
esportarepredefinito ArticoloPercorsi;

Il componente nel blocco di codice precedente contiene le route nidificate che erano precedentemente nel componente dell'app. Dopo aver creato il componente, dovresti importarlo nel file app componente e instradarlo utilizzando un singolo Itinerario elemento.

Per esempio:

importare { Percorsi, Percorso } da'reagire-router-dom';
importare ArticoloPercorsi da'./ArticoloPercorsi';
funzioneApp() {
ritorno (

'/articolo/*' elemento={ }>
 </Routes>
 )
}
esportarepredefinito Applicazione;

In finale Itinerario componente, la barra rovesciata e i simboli asterisco aggiunti alla fine del nome del percorso della Route assicurano che il nome del percorso corrisponda a qualsiasi nome del percorso che inizia con (/articolo).

C'è di più su React Router

Ora dovresti avere familiarità con le nozioni di base su come creare applicazioni a pagina singola in React.js, utilizzando React Router.

Ci sono molte altre funzionalità disponibili nella libreria React Router che rendono l'esperienza dello sviluppatore più dinamica durante la creazione di applicazioni web.