Verschachtelte Routen in React Router

In dieser Lektion werden wir uns mit verschachtelten Routen vertraut machen. Starten Sie die Anwendung, die wir in der letzten Lektion erstellt haben. Wenn wir auf die Links klicken, gelangen wir auf eine separate Produktseite. Nehmen wir an, das ist uns nicht praktisch und wir möchten, dass die Produktliste und die Produktseite nebeneinander auf einem Bildschirm angezeigt werden, um es übersichtlicher zu gestalten. Lassen Sie uns das umsetzen.

Dazu öffnen wir die Datei main.jsx und machen einfach unsere Route für die Produktseite zu einer untergeordneten Route der Stammroute oder, anders ausgedrückt, wir "verschachteln" sie in der Stammroute. Dazu verwenden wir noch eine weitere Eigenschaft des Route-Objekts children:

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
		errorElement: <ErrorPage404 />,
		children: [
			{
				path: 'products/:productId',
				element: <Product />,
			},
		],
	},

]);

Wir klicken erneut auf die Links, aber rechts von der Produktliste sehen wir nichts. Der Grund dafür ist, dass wir der Stammroute nicht mitgeteilt haben, wo wir ihre untergeordneten Routen rendern möchten.

Genau für das Rendern der Elemente untergeordneter Routen in der übergeordneten Route hilft uns die Komponente Outlet. Lassen Sie uns sie aus der Bibliothek in die Datei für die Stammroute importieren:

import { Outlet } from 'react-router-dom';

Dann umschließen wir sie mit einem div #product und fügen sie im Layout für die Stammroute am Ende des Markups nach dem schließenden Tag nav hinzu, und umschließen die gesamte Konstruktion noch mit einem weiteren div #main:

return (
	<div id="main">
		<nav>
			<a href={`/products/1`}>Product1</a>
			<a href={`/products/2`}>Product2</a>
		</nav>
		<div id="product">
			<Outlet />
		</div>
	</div>
);

Wenn wir jetzt auf die Links klicken, sehen wir sowohl die Produktliste als auch die Produktseite.

Fügen wir unserem index.css ein paar Stile hinzu:

h1, h2 {
	margin: 0;
}

div#main {
	display: flex;
	margin: 20px;
}

div#product {
	margin-left: 40px;
}

Nehmen Sie die Anwendung, die Sie in der Aufgabe zur letzten Lektion erstellt haben. Verwenden Sie die Materialien aus der Lektion und machen Sie die Route für die Studentenseite zu einer in die Stammroute verschachtelten Route.

Und nun sorgen Sie dafür, dass beim Klicken auf die Links sowohl die Liste der Studenten als auch die Studentenseite auf dem Bildschirm angezeigt werden.