Ruter i React Router

Ruter (Routes) er den viktigste delen av et applikasjon i React Router. La oss se på et kodesnippet fra forrige leksjon:

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

Så, egenskapene path og element som vi sendte til funksjonen når vi opprettet ruteren, er egenskapene til Route-objektet. Faktisk, har dette objektet mange egenskaper, de kan finnes i den offisielle dokumentasjonen. Fremover vil noen av dem være nyttige for oss:

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 ha brukt en alternativ JSX-stil og skrevet egenskapene som props for Route-komponenten, da ville kodesnutten vår sett slik ut:

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

Og, selvfølgelig, måtte man ha lagt til et par linjer til i importen:

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

Begge stilartene presentert i leksjonen er likeverdige. Vi vil i det videre holde oss til den første varianten.

Ta applikasjonen du opprettet i oppgavene til de foregående leksjonene. Prøv å omskrive kodesnutten for opprettelse av routeren (den gamle kan du kommentere ut foreløpig), ved å bruke den alternative JSX-syntaksen presentert i leksjonen. Forsikre deg om at applikasjonen fungerer.

Sett tilbake all den gamle koden, og fjern den nye. Forsikre deg om at applikasjonen fungerer.