Marsruudid React Routeris

Marsruudid (Routes) on React Routeri rakenduse kõige olulisem osa. Vaatleme eelmisest õppetükist väikest koodijuppi:

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

Nii et omadused path ja element, mida me edastasime funktsioonile ruuteri loomisel, ongi objekti Route omadused. Tegelikult sellel objektil on palju omadusi, neid leiate ametlikust dokumentatsioonist. Tulevikus on meil vaja mõnda neist:

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>;
}

Võiks kasutada alternatiivset JSX stiili ja kirjutada omadused propina komponendile Route, siis meie koodijupp näeks välja selline:

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

Ja loomulikult oleks vaja lisada veel paar rida importi:

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

Mõlemad õppetükis toodud stiilid on võrdväärsed. Me edaspidi jääme esimese variandi juurde.

Võtke rakendus, mille lõite varasemate õppetundide ülesannetes. Proovige ümber kirjutada koodijupp ruuteri loomiseks (vana kood kommenteerige ajutiselt välja), kasutades alternatiivset JSX süntaksit, mida on õppetükis näidatud. Veenduge, et rakendus töötab.

Asetage vana kood tagasi, ja uue koodi eemaldage. Veenduge, et rakendus töötab.