React Router è uno strumento essenziale per creare la navigazione nelle applicazioni React, e le sue ultime versioni continuano a migliorare l’esperienza di sviluppo con nuove funzionalità e miglioramenti delle prestazioni. Dalla versione 7 (o altre versioni future), React Router introduce funzionalità avanzate come nested route e layout route che aiutano a costruire applicazioni web robuste ed efficienti.
Funzionalità Nuove Chiave in React Router 7 (o Ultima Versione)
Ecco alcune delle miglioramenti significativi e funzionalità introdotte nell’ultima versione:
1. Definizione Semplificata della Route Con Data APIs
Le nuove data APIs, come loader e action, permettono di recuperare e modificare i dati in modo più dichiarativo all’interno delle route.
Nelle versioni precedenti, il recupero dei dati era generalmente gestito all’interno dei componenti React utilizzando useEffect o metodi del ciclo di vita dei componenti di classe. Questo spesso portava a una logica di recupero dei dati mescolata con la rendering dell’UI, che poteva diventare complicata.
Esempio React Router v5
import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
function UserPage() {
const { id } = useParams();
const [userData, setUserData] = useState(null);
useEffect(() => {
fetch(`/api/users/${id}`)
.then((response) => response.json())
.then((data) => setUserData(data));
}, [id]);
return (
<div>
<h1>User: {userData?.name}</h1>
</div>
);
}
Le ultime versioni introducono le API Loader, permettendo che il recupero dei dati avvenga direttamente a livello di route. Questo separa le preoccupazioni, semplifica i componenti e abilita una rendering concorrente migliore.
Esempio React Router v7
import { useLoaderData } from 'react-router-dom';
export async function userLoader({ params }) {
const response = await fetch(`/api/users/${params.id}`);
return response.json();
}
function UserPage() {
const userData = useLoaderData();
return (
<div>
<h1>User: {userData.name}</h1>
</div>
);
}
// Route Configuration
<Route path="/users/:id" element={<UserPage />} loader={userLoader} />
Differenza
In React Router 7, la logica di recupero dei dati (userLoader) è disaccoppiata dal componente, rendendo i componenti esclusivamente concentrati sul rendering. Questo approccio permette anche di pre-caricare i dati prima che il componente venga renderizzato, portando a una migliore esperienza utente e a transizioni più fluide.
2. Error Boundaries Per Route
Una delle funzionalità utili introdotte in React Router 7 (o nelle versioni più recenti) è la possibilità di definire Error Boundaries per route. Questo permette agli sviluppatori di gestire gli errori a un livello più granulare. Invece di avere un singolo boundary di errore globale per l’intera applicazione, è possibile definire boundary di errore specifici per singole route, rendendo la gestione degli errori più flessibile e localizzata. Ora è possibile una gestione granulare degli errori a livello di route.
Nelle versioni precedenti, la gestione degli errori era globale o gestita a livello di componente. Questo richiedeva agli sviluppatori di gestire tutti i possibili errori in un unico posto o di introdurre logiche complesse in vari componenti. Come mostrato nell’esempio suivantte, il ErrorBoundary è globale perché avvolge tutto il Router, il che significa che catturerà errori da tutte le rotte all’interno dell’app.
React Router v5 Example
function App() {
return (
<ErrorBoundary>
<Router>
<Route path="/" exact component={HomePage} />
<Route path="/about" component={AboutPage} />
</Router>
</ErrorBoundary>
);
}
React Router 7 introduceserror boundaries at the route level, making it possible to handle errors for specific routes. This allows for more granular control over how errors are managed and displayed.
React Router v7 Example
import { useRouteError } from 'react-router-dom';
function ErrorBoundary() {
const error = useRouteError();
return <div>Error: {error.message}</div>;
}
<Route path="/users/:id" element={<UserPage />} errorElement={<ErrorBoundary />} />
Difference
La gestione degli errori in React Router 7 è più modulare e localizzata. Ogni rotta può definire la propria logica di gestione degli errori, migliorando l’esperienza utente quando diverse parti dell’app falliscono.
3. Migliore Gestione delle Rotte di Layout
Rotte di layout sono introdotte che permettono una gestione coerente dei layout in diverse parti dell’app, riducendo la duplicazione del codice.
In React Router v5, i layout come header, footers o sidebars dovevano essere duplicati manualmente in ogni rotta o componente. Questo significava che gli sviluppatori spesso posizionavano i componenti di layout (es. Header, Footer) direttamente all’interno del componente App o li ripetevano across diversi gestori di rotta, come mostrato nel tuo esempio.
Esempio React Router v5
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Header from './Header';
import Footer from './Footer';
import HomePage from './HomePage';
import AboutPage from './AboutPage';
function App() {
return (
<Router>
<Header />
<Route path="/" exact component={HomePage} />
<Route path="/about" component={AboutPage} />
<Footer />
</Router>
);
}
React Router 7 introduce rotte di layout, dove puoi definire layout condivisi che avvolgono le rotte nidificate, eliminando la duplicazione del codice e assicurando una migliore struttura.
Esempio React Router v7
import { Outlet } from 'react-router-dom';
function SharedLayout() {
return (
<div>
<header>Header Content</header>
<main>
<Outlet /> {/* Nested routes will render here */}
</main>
<footer>Footer Content</footer>
</div>
);
}
// Route Configuration with Layout
<Route path="/" element={<SharedLayout />}>
<Route index element={<HomePage />} />
<Route path="about" element={<AboutPage />} />
</Route>
Differenza
Rotte di layout consentono un modo pulito e riutilizzabile per applicare layout condivisi su più rotte, senza ripetere il codice. Outlet funziona come un placeholder per le rotte figlie, rendendo molto più facile gestire i layout.
4. Capacità di Routing Annidato Migliorate
Ci sono modi più efficienti per gestire rotte annidate, inclusa l’ereditarietà degli elementi di layout e migliori strategie di fetching dei dati.
nelle versioni più vecchie, era possibile utilizzare le rotte annidate, ma la configurazione era più complessa. Era necessario gestire esplicitamente l’annidamento delle rotte all’interno del componente padre utilizzando useRouteMatch() per ottenere il percorso corrente, poi definire manualmente le rotte annidate all’interno del componente padre. Questo approccio può diventare rapidamente fastidioso, specialmente per applicazioni complesse con più livelli di rotte annidate.
Esempio React Router v5
import { Route, useRouteMatch } from 'react-router-dom';
function Dashboard() {
const { path } = useRouteMatch();
return (
<div>
<h1>Dashboard</h1>
<Route path={`${path}/overview`} component={Overview} />
<Route path={`${path}/settings`} component={Settings} />
</div>
);
}
<Route path="/dashboard" component={Dashboard} />
In React Router 7, le rotte annidate sono ora configurate dichiarativamente, direttamente nella configurazione della rotta, semplificando la struttura del routing e rendendo il codice più leggibile.
Esempio React Router v7
import { Outlet } from 'react-router-dom';
function DashboardLayout() {
return (
<div>
<h1>Dashboard</h1>
<Outlet /> {/* Nested routes will render here */}
</div>
);
}
// Route Configuration
<Route path="/dashboard" element={<DashboardLayout />}>
<Route path="overview" element={<Overview />} />
<Route path="settings" element={<Settings />} />
</Route>
Differenza
In React Router 7, le rotte annidate sono più semplici da gestire perché sono definite a livello di configurazione della rotta utilizzando il componente Outlet. Questa struttura promuove una chiara separazione tra layout e contenuto.
5. Migliorata l’Integrazione con Suspense
Adesso, c’è un supporto migliore per React 18 e il Suspense per un’esperienza di caricamento più fluida.
Nelle versioni precedenti, il suspense era supportato solo per componenti lazy-loaded, limitando la sua utilità per scenari di recupero dati complessi.
Esempio React Router v5
import React, { Suspense, lazy } from 'react';
const HomePage = lazy(() => import('./HomePage'));
<Suspense fallback={<div>Loading</div>}>
<Route path="/" component={HomePage} />
</Suspense>
React Router 7 integra Suspense con il suo Loader e le API di Action, permettendo un’acquisizione dati più fluida e concorrente con minimo sforzo.
React Router v7 Example
import { Suspense } from 'react';
import { Route, Routes } from 'react-router-dom';
function App() {
return (
<Suspense fallback={<div>Loading</div>}>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/about" element={<AboutPage />} />
</Routes>
</Suspense>
);
}
Differenza
React Router 7 sfrutta Suspense sia per i componenti lazy-loaded che per l’acquisizione dei dati, permettendo transizioni più fluide e un’interfaccia utente più reattiva.
Conclusione
React Router 7 (o la versione più recente) migliora significativamente il routing nelle applicazioni React introducendo diverse funzionalità potenti. Le nuove Loader e API di Action abilitano l’acquisizione dei dati dichiarativa, separando la logica dei dati dai componenti per un codice più pulito. Le Route di Layout semplificano la gestione dei layout condivisi, riducendo la ridondanza. Le route annidate sono più efficienti e intuitive, permettendo una struttura più chiara. Inoltre, le boundary di errore per route forniscono una gestione degli errori granulare, migliorando l’affidabilità. La completa integrazione con React Suspense supporta un caricamente dati più fluido e una migliore esperienza utente. Insieme, questi progressi semplificano lo sviluppo di applicazioni React complesse, scalabili e performanti, rendendo React Router 7 un miglioramento sostanziale rispetto alle versioni precedenti.
Source:
https://dzone.com/articles/why-react-router-7-is-a-game-changer-for-react-devs