Ruter i React Router

Ruter (Routes) er den vigtigste del af et program med React Router. Lad os se på et stykke kode fra den forrige lektion:

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

Så, egenskaberne for objektet path og element, som vi passede til funktionen ved oprettelse af routeren, er egenskaber for objektet Route. Faktisk, har dette objekt mange egenskaber, de kan findes i den officielle dokumentation. I fremtiden vil nogle af dem være nyttige for os:

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 kunne have brugt en alternativ JSX-stil og skrevet egenskaberne som props for Route-komponenten, så ville vores stykke kode se sådan ud:

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

Og, selvfølgelig, ville det være nødvendigt at tilføje et par linjer mere i importen:

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

Begge de i lektionen viste stile er lige værd. I fremtiden vil vi holde os til den første variant.

Tag det program, du oprettede i opgaverne til de forrige lektioner. Prøv at omskrive stykket kode for oprettelse af routeren (den gamle kan du lige kommentere ud), ved at bruge den alternative JSX-syntaks, vist i lektionen. Vær sikker på, at programmet fungerer.

Sæt al den gamle kode tilbage på plads, og fjern den nye. Vær sikker på, at programmet fungerer.