React Router ist ein unverzichtbares Werkzeug zur Erstellung von Navigation in React-Anwendungen, und seine neuesten Versionen verbessern weiter die Entwicklererfahrung durch neue Funktionen und Leistungsoptimierungen. Ab Version 7 (oder anderen künftigen Versionen) bringt React Router erweiterte Funktionen wie verschachtelte Routen und Layout-Routen, die dabei helfen, robuste und effiziente Webanwendungen zu erstellen.
Wichtige Neue Funktionen in React Router 7 (oder Neueste)
Hier sind einige der bedeutenden Verbesserungen und Funktionen, die in der neuesten Version eingeführt wurden:
1. Vereinfachte Routendefinition Mit Data-APIs
Neue Data-APIs, wie loader und action, erlauben es, Daten auf eine mehr deklarative Weise innerhalb von Routen abzurufen und zu verändern.
In älteren Versionen wurde das Abrufen von Daten typischerweise innerhalb von React-Komponenten mit useEffect oder Lebenszyklusanweisungen von Klassenkomponenten gehandhabt. Dies führte oft dazu, dass Logik zum Abrufen von Daten mit der UI-Rendering vermischt wurde, was umständlich werden konnte.
React Router v5 Beispiel
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>
);
}
Die neuesten Versionen führen Loader-APIs ein, die das Abrufen von Daten direkt auf Ebene der Route ermöglichen. Dies trennt die Verantwortlichkeiten, vereinfacht Komponenten und ermöglicht besseres paralleles Rendering.
React Router v7 Beispiel
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} />
Unterschied
In React Router 7 ist die Datenabruflogik (userLoader) vom Komponenten entkoppelt, was die Komponenten rein auf die Darstellung fokussiert. Diese Herangehensweise ermöglicht es auch, Daten vor der Darstellung des Komponenten vorab abzurufen, was zu einer besseren Benutzererfahrung und flüssigeren Übergängen führt.
2. Fehlergrenzen pro Route
Eine der nützlichen Funktionen, die in React Router 7 (oder neueren Versionen) eingeführt wurde, ist die Fähigkeit, Fehlergrenzen pro Route zu definieren. Dies ermöglicht es Entwicklern, Fehler auf einer feineren Ebene zu behandeln. Anstatt eine einzige globale Fehlergrenze für die gesamte Anwendung zu haben, können Sie Fehlergrenzen für individuelle Routen festlegen, was die Fehlerbehandlung flexibler und lokalisiert macht. Granulare Fehlerbehandlung auf Ebene der Route ist nun möglich.
In älteren Versionen war die Fehlerbehandlung global oder wurde auf Komponentenebene verwaltet. Dies erforderte von Entwicklern, alle möglichen Fehler an einer Stelle zu behandeln oder komplexes Logan in verschiedenen Komponenten einzuführen. Wie im folgenden Beispiel erwähnt, ist das ErrorBoundary global, da es den gesamten Router umgibt, was bedeutet, dass es Fehler von allen Routen innerhalb der App fängt.
React Router v5 Beispiel
function App() {
return (
<ErrorBoundary>
<Router>
<Route path="/" exact component={HomePage} />
<Route path="/about" component={AboutPage} />
</Router>
</ErrorBoundary>
);
}
React Router 7 führt Fehlergrenzen auf Ebene der Route ein, was es ermöglicht, Fehler für spezifische Routen zu behandeln. Dies ermöglicht eine feinere Kontrolle darüber, wie Fehler verwaltet und dargestellt werden.
React Router v7 Beispiel
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 />} />
Unterschied
Die Fehlerbehandlung in React Router 7 ist modularer und lokalisierter. Jede Route kann ihre eigene Fehlerbehandlungslogik definieren, was die Benutzererfahrung verbessert, wenn verschiedene Teile der App fehlschlagen.
3. Bessere Handhabung von Layout-Routen
Layout-Routen werden eingeführt, die eine konsistente Layoutverwaltung in verschiedenen Teilen der App ermöglichen und Code-Duplikate reduzieren.
In React Router v5 mussten Layouts wie Header, Footers oder Sidebars manuell dupliziert werden in jeder Route oder Komponente. Das bedeutete, dass Entwickler oft Layoutkomponenten (z.B. Header, Footer) direkt innerhalb der App-Komponente oder wiederholten sie in verschiedenen Routenhandlern, wie in deinem Beispiel gezeigt.
React Router v5 Beispiel
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 führt Layout-Routen ein, bei denen du gemeinsame Layouts definieren kannst, die verschachtelte Routen umschließen, was Code-Duplikate eliminiert und eine bessere Struktur sicherstellt.
React Router v7 Beispiel
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>
Unterschied
Layout-Routen ermöglichen eine saubere, wiederverwendbare Methode, um gemeinsame Layouts über mehrere Routen anzuwenden, ohne Code zu wiederholen. Outlet dient als Platzhalter für Kinderrouten und macht die Verwaltung von Layouts viel einfacher.
4. Erweiterte Fähigkeiten für verschachtelte Routen
Es gibt effizientere Möglichkeiten, verschachtelte Routen zu handhaben, einschließlich der Vererbung von Layoutelementen und besseren Strategien für Datenabrufe.
In älteren Versionen waren verschachtelte Routen möglich, aber die Einrichtung war umständlicher. Sie mussten die Routenverkettung innerhalb der übergeordneten Komponenteexplizit mit useRouteMatch() verwalten, um den aktuellen Pfad zu erhalten, und dann die verschachtelten Routen manuell innerhalb der übergeordneten Komponente definieren. Diese Methode kann insbesondere bei komplexen Anwendungen mit mehreren Ebenen von verschachtelten Routen schnell umständlich werden.
React Router v5 Beispiel
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 sind verschachtelte Routen jetzt declarativ direkt in der Routenkonfiguration konfiguriert, was die Routingstruktur vereinfacht und den Code lesbarer macht.
React Router v7 Beispiel
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>
Unterschied
In React Router 7 sind verschachtelte Routen einfacher zu verwalten, da sie auf Ebene der Routenkonfiguration mit dem Outlet-Komponentendefiniert werden. Diese Struktur fördert eine klare Trennung zwischen Layout und Inhalt.
5. Verbesserte Suspense-Integration
Nun gibt es bessere Unterstützung für React 18s Suspense und gleichzeitiges Rendern für flüssigere Ladeerfahrungen.
In älteren Versionen wurde Suspense nur für lazy-loaded Komponenten unterstützt, was ihre Nützlichkeit für komplexe Datenerfassungs-Szenarien einschränkte.
React Router v5 Beispiel
import React, { Suspense, lazy } from 'react';
const HomePage = lazy(() => import('./HomePage'));
<Suspense fallback={<div>Loading</div>}>
<Route path="/" component={HomePage} />
</Suspense>
React Router 7 integriert Suspense mit seinem Loader und Action APIs, allowing für eine flüssigere, parallele Datenerfassung mit minimalem Aufwand.
React Router v7 Beispiel
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>
);
}
Unterschied
React Router 7 nutzt Suspense sowohl für lazy-loaded Komponenten als auch für Datenerfassungen, allowing für flüssigere Übergänge und eine reagiertere Benutzeroberfläche.
Schlussfolgerung
React Router 7 (oder die neueste Version) verbessert die Routenführung in React-Anwendungen erheblich, indem es mehrere leistungsstarke Funktionen einführt. Die neuen Loader und Action APIs ermöglichen eine deklarative Datenerfassung, indem sie die Datenlogik von Komponenten trennen, was zu saubererem Code führt. Layout-Routen rationalisieren die Verwaltung von gemeinsam genutzten Layouts und reduzieren Redundanz. Nested routes sind effizienter und intuitiver, allowing für eine klarere Struktur. Zusätzlich bieten Fehlergrenzen pro Route feingranulares Fehlermanagement, das die Zuverlässigkeit verbessert. Die vollständige Integration mit React Suspense unterstützt flüssigere Datenladeprozesse und Benutzererfahrungen. Gemeinsam vereinfachen diese Weiterentwicklungen die Entwicklung komplexer, skalierbarer und leistungsfähiger React-Anwendungen und machen React Router 7 zu einer erheblichen Verbesserung gegenüber früheren Versionen.
Source:
https://dzone.com/articles/why-react-router-7-is-a-game-changer-for-react-devs