Rute în React Router

Rutele (Routes) sunt cea mai importantă parte a unei aplicații în React Router. Să considerăm un fragment de cod din lecția anterioară:

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

Deci, proprietățile obiectului path și element, pe care le-am transmis funcției la crearea routerului, sunt proprietățile obiectului Route. De fapt, acest obiect are multe proprietăți, ele pot fi găsite în documentația oficială. În continuare, unele dintre ele ne vor fi utile:

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

Puteam folosi stilul JSX alternativ și să scriem proprietățile ca props pentru componenta Route, atunci fragmentul nostru de cod ar arăta astfel:

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

Și, desigur, ar fi trebuit să adăugăm încă câteva rânduri în import:

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

Ambele stiluri prezentate în lecție sunt echivalente. Noi în continuare vom respecta prima variantă.

Luați aplicația creată de dvs. în sarcinile din lecțiile anterioare. Încercați să rescrieți fragmentul de cod pentru crearea routerului (pe cel vechi deocamdată comentați-l), folosind sintaxa JSX alternativă, prezentată în lecție. Asigurați-vă că aplicația funcționează.

Restaurați tot codul vechi la loc, iar noul cod eliminați-l. Asigurați-vă că aplicația funcționează.