React Router – Navigation & Routing

6 Kernkonzepte
Die wichtigsten React Router-Konzepte für client-seitiges Routing: BrowserRouter · Routes / Route · Link / NavLink · useParams / useNavigate · Nested Routes / Outlet · useLocation / useMatch React Router ist die Standard-Bibliothek für Routing in React-Anwendungen. Sie ermöglicht die Navigation zwischen verschiedenen Seiten, ohne dass der Browser neu geladen wird.

Setup & BrowserRouter – Routing einrichten

npm install react-router-dom · <BrowserRouter>
// main.jsx import { BrowserRouter } from 'react-router-dom'; import App from './App'; const root = createRoot(document.getElementById('root')); root.render( <BrowserRouter> <App /> </BrowserRouter> );

BrowserRouter ist der Wrapper für die gesamte Routing-Konfiguration. Er verwendet die HTML5 History-API für saubere URLs ohne Hash.

Beispiele
// Installation
npm install react-router-dom
// Router mit HashRouter (für Static Hosting)
import { HashRouter } from 'react-router-dom';
// <HashRouter> verwendet den Hash-Teil der URL (#/about)
Tipp: BrowserRouter benötigt eine korrekte Server-Konfiguration (Fallback auf index.html). HashRouter funktioniert ohne Server-Konfiguration, ist aber weniger SEO-freundlich.

Routes & Route – Pfade definieren

<Routes> · <Route path="..." element={...} />
// App.jsx import { Routes, Route } from 'react-router-dom'; function App() { return ( <Routes> <Route path="/" element={ <Home /> } /> <Route path="/about" element={ <About /> } /> <Route path="/users/:id" element={ <User /> } /> </Routes> ); }

Routes und Route definieren die verfügbaren Pfade in Ihrer Anwendung. Die path-Eigenschaft beschreibt die URL, element die anzuzeigende Komponente.

Pfad-Muster

Muster Beschreibung Beispiel
static Fester Pfad /about
:param Dynamischer Parameter /users/:id → /users/42
* Wildcard (alle Pfade) /* → Fallback-Route
? (optional) Optionaler Parameter /post/:id? → /post oder /post/1
index Standard-Route in verschachtelten Routen <Route index element={...} />
Beispiele
// Index-Route (Fallback für leeren Pfad)
<Route index element={ <Dashboard /> } />
// 404-Fallback mit Wildcard
<Route path="*" element={ <NotFound /> } />
// Mehrere Parameter
<Route path="/:category/:productId" element={ <Product /> } />
Tipp: Die Reihenfolge der Route-Komponenten in Routes ist wichtig – spezifischere Pfade sollten vor allgemeineren stehen.

Link & NavLink – Navigation ohne Neuladen

<Link to="..."> · <NavLink className={...}>
// Navigation mit Link import { Link, NavLink } from 'react-router-dom'; <Link to="/about">Über uns</Link> <NavLink to="/dashboard" className={({ isActive }) => isActive ? "active" : ""}>Dashboard</NavLink>

Link erzeugt einen HTML-Link, der die Navigation innerhalb der React-Anwendung ermöglicht, ohne die Seite neu zu laden. NavLink ist eine spezielle Version, die den aktiven Zustand erkennt.

Beispiele
// NavLink mit activeClassName
<NavLink
to="/dashboard"
className={({ isActive }) => isActive ? "active-link" : "link"}
>Dashboard</NavLink>
// Link mit Query-Parametern
<Link to="/search?q=react">Suche</Link>
// Link mit State
<Link to="/profile" state={ { fromHome: true } }>Profil</Link>
// Link mit dynamischem Pfad
<Link to={ `/users/${user.id}` }>{ user.name }</Link>
Tipp: NavLink bietet die isActive- und isPending-Funktionen für die Styling-Entscheidung – perfekt für Navigationsmenüs mit aktiven Links.

Hooks – useParams, useNavigate, useLocation

useParams() · useNavigate() · useLocation()
// Parameter aus der URL lesen import { useParams, useNavigate, useLocation } from 'react-router-dom'; const { id } = useParams(); const navigate = useNavigate(); const location = useLocation();

Hooks von React Router ermöglichen den Zugriff auf Routing-Informationen und die Navigation innerhalb von Komponenten.

Die wichtigsten Hooks

Hook Beschreibung Beispiel
useParams Dynamische URL-Parameter { id: '42' }
useNavigate Programmatische Navigation navigate('/about')
useLocation Aktuelles Location-Objekt { pathname, search, state }
useMatch Prüft, ob Pfad matcht useMatch('/about')
useOutlet Outlet-Context für verschachtelte Routen const outlet = useOutlet()
useSearchParams Query-Parameter [searchParams, setSearchParams]
Beispiele
// useParams – Parameter lesen
function UserProfile() {
const { userId } = useParams();
return <h1>Benutzerprofil: { userId }</h1>;
}
// useNavigate – Navigation
function LoginButton() {
const navigate = useNavigate();
const handleLogin = () => {
// Nach Login zur Startseite navigieren
navigate('/');
};
return <button onClick={ handleLogin }>Login</button>;
}
// useLocation – Location-Objekt
function CurrentPage() {
const location = useLocation();
return <p>Sie sind auf: { location.pathname }</p>;
}
// useSearchParams – Query-Parameter
function SearchPage() {
const [searchParams, setSearchParams] = useSearchParams();
const query = searchParams.get('q') || '';
return <input value={ query } onChange={(e) => setSearchParams({ q: e.target.value })} />;
}
Tipp: useNavigate kann auch mit -1 für "zurück" verwendet werden (navigate(-1)). useLocation enthält das state-Objekt, das mit Link übergeben wurde.

Nested Routes & Outlet – Layouts und Unterrouten

<Outlet /> · <Route> nesting
// Layout-Komponente import { Outlet } from 'react-router-dom'; function Layout() { return ( <div> <Header /> <main><Outlet /></main> <Footer /> </div> ); }

Nested Routes ermöglichen es, Routen innerhalb anderer Routen zu verschachteln. Das Outlet-Element markiert die Stelle, an der die Unterroute gerendert wird.

Beispiele
// Routes-Konfiguration mit Verschachtelung
<Routes>
<Route path="/" element={ <Layout /> }>
<Route index element={ <Home /> } />
<Route path="about" element={ <About /> } />
<Route path="users">
<Route index element={ <UserList /> } />
<Route path=":id" element={ <UserDetail /> } />
</Route>
</Route>
</Routes>
// In der Layout-Komponente:
<nav>
<NavLink to="/">Home</NavLink>
<NavLink to="/about">About</NavLink>
<NavLink to="/users">Benutzer</NavLink>
</nav>
<Outlet />
Tipp: Verschachtelte Routen sind ideal für Layouts – das gemeinsame Layout (Header, Sidebar, Footer) wird einmal definiert und der Inhalt wechselt über das Outlet.

Fortgeschrittene Konzepte – Redirect, Lazy Loading, Auth

Navigate · lazy() · Suspense · useNavigate
// Redirect mit Navigate import { Navigate } from 'react-router-dom'; <Route path="/old" element={ <Navigate to="/new" /> } /> // Lazy Loading const About = lazy(() => import('./About'));

Fortgeschrittene Konzepte wie Redirects, Lazy Loading und geschützte Routen erweitern die Funktionalität von React Router.

Beispiele
// Protected Route (Auth-Guard)
function ProtectedRoute({ children }) {
const { user } = useAuth();
if (!user) {
return <Navigate to="/login" replace />;
}
return children;
}
// Verwendung
<Route
path="/dashboard"
element={ <ProtectedRoute><Dashboard /></ProtectedRoute> }
/>
// Lazy Loading mit Suspense
import { lazy, Suspense } from 'react';
const Dashboard = lazy(() => import('./Dashboard'));
<Route
path="/dashboard"
element={ <Suspense fallback={ <div>Lädt...</div> }> }
<Dashboard />
</Suspense>
/>
// Redirect mit replace (kein History-Eintrag)
<Route path="/old" element={ <Navigate to="/new" replace /> } />
Tipp: Lazy Loading reduziert die initiale Bundle-Größe erheblich. Kombinieren Sie lazy() mit Suspense für eine nahtlose Benutzererfahrung.

React Router im Überblick

BrowserRouter Router für HTML5-API
Saubere URLs
Routes Container für Route-Definitionen
Pfadabgleich
Link Navigation ohne Neuladen
to, state
useParams Dynamische Parameter
URL-Segmente
Outlet Verschachtelte Routen
Layouts
Navigate Redirects
Umlenkung

Quick Summary

BrowserRouter
Router-Setup
Routes
Pfade definieren
Link
Navigation
useParams
Parameter
Outlet
Verschachtelte Routen
lazy
Lazy Loading
<Route path="/users/:id" element={<User />} /> · const { id } = useParams() · const navigate = useNavigate()
Alle Cheatsheets Impressum Datenschutz
Zum Drucken
© ITGrundlagen.com · React Router Cheatsheet · Befehlsübersicht · Schnellreferenz