Routen in React Router

Routen (Routes) sind der wichtigste Teil einer React Router Anwendung. Betrachten wir ein Code-Stück aus der vorherigen Lektion:

const router = createBrowserRouter([
	{
		path: '/',
		element: <div>Hello Router!</div>,
	},
]);

Nun, die Eigenschaften path und element des Objekts, die wir der Funktion bei der Erstellung des Routers übergeben haben, sind die Eigenschaften des Route-Objekts. Tatsächlich hat dieses Objekt viele Eigenschaften, die in der offiziellen Dokumentation gefunden werden können. In Zukunft werden einige davon für uns nützlich sein:

interface RouteObject {
	path?: string;
	index?: boolean;
	children?: React.ReactNode;
	caseSensitive?: boolean;
	id?: string;
	loader?: LoaderFunction;
	action?: ActionFunction;
	element?: React.ReactNode | null;
	Component?: React.ComponentType | null;
	errorElement?: React.ReactNode | null;
	ErrorBoundary?: React.ComponentType | null;
	handle?: RouteObject["handle"];
	shouldRevalidate?: ShouldRevalidateFunction;
	lazy?: LazyRouteFunction<RouteObject>;
}

Man hätte den alternativen JSX-Stil verwenden und die Eigenschaften als Props für die Route-Komponente schreiben können, dann hätte unser Code-Stück so ausgesehen:

const router = createBrowserRouter(
	createRoutesFromElements(
		<Route
			path = '/'
			element = {<div>Hello Router!</div>}
		/>
	)
);

Und natürlich müssten ein paar weitere Zeilen zum Import hinzugefügt werden:

import {
	createRoutesFromElements,
	createBrowserRouter,
	RouterProvider,
	Route,
} from 'react-router-dom';

Beide in der Lektion gezeigten Stile sind gleichwertig. Wir werden uns in Zukunft an die erste Variante halten.

Nehmen Sie die Anwendung, die Sie in den Aufgaben der vorherigen Lektionen erstellt haben. Versuchen Sie, das Code-Stück zur Erstellung des Routers umzuschreiben (kommentieren Sie den alten Code vorerst aus), indem Sie die alternative JSX-Syntax aus der Lektion verwenden. Stellen Sie sicher, dass die Anwendung funktioniert.

Setzen Sie den gesamten alten Code zurück und entfernen Sie den neuen. Stellen Sie sicher, dass die Anwendung funktioniert.