Come creare un’app a pagina singola utilizzando React Router
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, esegui il seguente comando nella directory del tuo progetto:
npm i react-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:
yarn add react-router-dom@6
Configurazione del router React
Per configurare React Router e renderlo disponibile nella tua applicazione, importa BrowserRouter da react-router-dom all’interno del tuo file index.js , quindi esegui il wrapping del componente dell’app nell’elemento BrowserRouter :
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
Il wrapping del componente dell’app nell’elemento BrowserRouter offre all’intera app l’accesso completo 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”, “Informazioni” e “Blog”. Importa anche gli elementi Route e Routes da react-router-dom.
Definirai i tuoi percorsi all’interno del componente App :
import { Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Blog from './Blog';
function App() {
return (
<Routes>
<Route path='/' element={ <Home /> } />
<Route path='/about' element={ <About /> } />
<Route path='/blog' element={ <Blog /> }/>
</Routes>
)
}
export default App;
Il componente App è il componente principale che esegue il rendering di tutto il codice che hai scritto negli altri componenti.
L’ elemento Routes è l’elemento padre che avvolge i singoli percorsi che crei nel componente dell’app. L’ elemento Route crea un singolo percorso. Richiede due attributi prop: un percorso e un elemento .
L’ attributo path 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 renderà per primo, quindi il componente Home esegue il rendering quando esegui la tua applicazione. Non confondere questo sistema con l’implementazione del rendering condizionale nei tuoi componenti React. Puoi dare a questo attributo di percorso qualsiasi nome tu voglia.
L’ attributo element definisce il componente che la Route renderà.
Lavorare con il componente di collegamento del router React
Il componente di collegamento è un componente React Router utilizzato per navigare su percorsi diversi. Questi componenti accedono ai vari percorsi che hai creato.
Per esempio:
import { Link } from 'react-router-dom';
function Home() {
return (
<div>
<Link to='/about'>About page</Link>
<Link to='/blog'>Blog page</Link>
<h1>This is the Home Page<h1/>
</div>
)
}
export default Home;
Il componente link è quasi identico all’anchor tag HTML <a> , utilizza solo un attributo chiamato “to” invece di “href”. Il componente di collegamento naviga verso la Route con il percorso corrispondente come suo attributo e rende 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 componente dell’app .
Per esempio:
import { Routes, Route } from 'react-router-dom';
import Articles from './Articles';
import NewArticle from './NewArticle';
import ArticleOne from './ArticleOne';
function App() {
return (
<Routes>
<Route path='/article' element={ <Articles /> }/>
<Route path='/article/new' element={ <NewArticle /> }/>
<Route path='/article/1' element={ <ArticleOne /> }/>
</Routes>
)
}
export default App;
Il blocco di codice precedente importa e instrada i componenti creati Articles , NewArticle e ArticleOne . Ci sono alcune somiglianze nei percorsi URL tra i tre percorsi.
Il percorso di NewArticle Route inizia come il percorso di Articles Route, con l’aggiunta di una barra rovesciata (/) e la parola “new”, cioè (/new). L’unica differenza tra i nomi di percorso di Articles Route e ArticleOne Route è la barra (/1) alla fine del percorso del componente ArticleOne .
Puoi nidificare le tre rotte piuttosto che lasciarle nel loro stato attuale.
Così:
import { Routes, Route } from 'react-router-dom';
import Articles from './Articles';
import NewArticle from './NewArticle';
import ArticleOne from './ArticleOne';
function App() {
return (
<Routes>
<Route path='/article'>
<Route index element={ <Articles /> }/>
<Route path='/article/new' element={ <NewArticle /> }/>
<Route path='/article/1' element={ <ArticleOne /> }/>
</Route>
</Routes>
)
}
export default App;
Hai racchiuso le tre rotte individuali in un singolo elemento Route . Si noti che l’ elemento Route padre ha solo l’attributo path e nessun attributo element che definisce il componente di cui eseguire il rendering. L’ attributo index nel primo elemento Route figlio specifica che questa Route viene visualizzata quando si passa al percorso dell’URL della Route padre .
Per rendere il tuo codice migliore e più gestibile, dovresti definire i tuoi percorsi in un componente e importarli nel componente dell’app per l’uso.
Per esempio:
import { Routes, Route } from 'react-router-dom';
import Articles from './Articles';
import NewArticle from './NewArticle';
import ArticleOne from './ArticleOne';
function ArticleRoutes() {
return (
<Routes>
<Route index element={ <Articles /> }/>
<Route path='/article/new' element={ <NewArticle /> }/>
<Route path='/article/1' element={ <ArticleOne /> }/>
</Routes>
)
}
export default ArticleRoutes;
Il componente nel blocco di codice precedente contiene le route nidificate che erano precedentemente nel componente dell’app. Dopo aver creato il componente, devi importarlo nel componente dell’app e instradarlo utilizzando un singolo elemento Route .
Per esempio:
import { Routes, Route } from 'react-router-dom';
import ArticleRoutes from './ArticleRoutes';
function App() {
return (
<Routes>
<Route path='/article/*' element={ <ArticleRoutes /> }>
</Routes>
)
}
export default App;
Nel componente finale della Route , i simboli della barra rovesciata e dell’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 (/article) .
C’è di più per 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.
Lascia un commento