Verschachtelte Routes und Outlet-Layouts
Erstellen Sie mehrstufige Route-Layouts mit verschachtelten -Elementen und der -Component.
Verschachtelte Routes und Outlet-Layouts ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.
Was sind verschachtelte Routen?
Mit verschachtelten Routen in React Router v6 können Sie Layouts zusammenstellen: Eine übergeordnete Route rendert einen Rahmen (Navigation, Seitenleiste), während untergeordnete Routen den Inhaltsbereich über <Outlet /> füllen.
Verschachtelte Routen definieren
Platzieren Sie untergeordnete <Route>-Elemente innerhalb einer übergeordneten <Route> in Ihrer Router-Konfiguration. Der Pfad der übergeordneten Route ist ein Präfix für alle untergeordneten Routen.
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
const router = createBrowserRouter([
{
path: '/',
element: <RootLayout />,
children: [
{ path: 'dashboard', element: <Dashboard /> },
{ path: 'settings', element: <Settings /> },
],
},
]);Die Outlet-Komponente
<Outlet /> ist ein Platzhalter in der übergeordneten Layout-Komponente. React Router ersetzt ihn durch das Element der passenden untergeordneten Route.
function RootLayout() {
return (
<div>
<nav>
<Link to="/dashboard">Dashboard</Link>
<Link to="/settings">Settings</Link>
</nav>
<main>
<Outlet /> {/* child route renders here */}
</main>
</div>
);
}Index-Routen
Eine Route mit index: true wird gerendert, wenn die URL der übergeordneten Route exakt übereinstimmt. Sie fungiert als Standardroute, wenn kein anderer untergeordneter Pfad übereinstimmt.
{
path: '/',
element: <RootLayout />,
children: [
{ index: true, element: <Home /> }, // renders at '/'
{ path: 'about', element: <About /> },
],
}Mehrstufige Verschachtelung
Routen können über mehrere Ebenen hinweg verschachtelt werden. Jede Layout-Komponente in der Kette rendert ein <Outlet /> für ihre eigenen untergeordneten Routen.
const router = createBrowserRouter([
{
path: '/app',
element: <AppShell />,
children: [
{
path: 'users',
element: <UsersLayout />,
children: [
{ index: true, element: <UserList /> },
{ path: ':id', element: <UserDetail /> },
],
},
],
},
]);Outlet-Kontext
Übergeben Sie Daten von einem Layout an verschachtelte untergeordnete Routen über die context-Prop von <Outlet /> und lesen Sie sie in den untergeordneten Routen mit useOutletContext() aus.
// Parent layout
function UsersLayout() {
const [selected, setSelected] = useState(null);
return <Outlet context={{ selected, setSelected }} />;
}
// Child route
function UserDetail() {
const { selected } = useOutletContext();
return <div>{selected}</div>;
}Benannte Layouts mit pfadlosen Routen
Eine Route ohne path umschließt untergeordnete Routen ausschließlich für das Layout, ohne ein URL-Segment hinzuzufügen. Das ist nützlich, um Routen unter einem gemeinsamen Layout zu gruppieren.
{
element: <AuthenticatedLayout />, // no path
children: [
{ path: '/profile', element: <Profile /> },
{ path: '/billing', element: <Billing /> },
],
}Relative Links in verschachtelten Routen
Innerhalb einer verschachtelten Route wird <Link to='sibling'> relativ zum Pfad der aktuellen Route aufgelöst, genau wie relative URLs in HTML.
// Inside /app/users — link goes to /app/users/new
function UserList() {
return <Link to="new">Add User</Link>;
}useMatch in verschachtelten Routen
useMatch(pattern) gibt Übereinstimmungsdaten zurück, wenn die aktuelle URL dem Muster entspricht. Das ist nützlich, um aktive Links in verschachtelten Layouts zu formatieren.
function NavLink({ to, children }) {
const match = useMatch(to);
return (
<Link to={to} className={match ? 'active' : ''}>
{children}
</Link>
);
}Fehlergrenzen pro Segment
Fügen Sie jeder verschachtelten Route ein errorElement hinzu, um Fehler nur in diesem Segment abzufangen, ohne den gesamten Layout-Rahmen zum Absturz zu bringen.
{
path: 'users',
element: <UsersLayout />,
errorElement: <UsersError />,
children: [
{ path: ':id', element: <UserDetail /> },
],
}Praxisbeispiel: Dashboard-Layout
Ein typisches Dashboard verwendet eine übergeordnete Route für den App-Rahmen (Kopfzeile und Seitenleiste) sowie verschachtelte Routen für die einzelnen Bereiche. So bleibt der Rahmen eingebunden, während sich nur der Inhaltsbereich ändert.
function DashboardShell() {
return (
<div className="dashboard">
<Sidebar />
<div className="content">
<Outlet />
</div>
</div>
);
}Schnelltest
Welche Komponente muss ein übergeordnetes Layout rendern, damit die passende untergeordnete Route angezeigt wird?
Zusammenfassung
Mit verschachtelten Routen können übergeordnete Routen persistente Layouts rendern, während untergeordnete Routen das <Outlet /> füllen. Verwenden Sie Index-Routen für Standardrouten, pfadlose Routen für gemeinsame Layouts und useOutletContext, um Daten nach unten weiterzugeben.
Häufig gestellte Fragen
Ist die Lektion „Verschachtelte Routes und Outlet-Layouts“ kostenlos?
Ja — der vollständige Text von „Verschachtelte Routes und Outlet-Layouts“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Verschachtelte Routes und Outlet-Layouts“?
Erstellen Sie mehrstufige Route-Layouts mit verschachtelten -Elementen und der -Component. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um React Academy zu starten?
Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Verschachtelte Routes und Outlet-Layouts“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?
Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Verschachtelte Routes und Outlet-Layouts
- Loader und Actions (Data Router API)
- Geschützte Routes und Auth-Guards
- State in URL-Suchparametern verwalten