Trasy v React Router

Trasy (Routes) sú najdôležitejšou časťou aplikácie na React Router. Pozrime sa na kúsok kódu z predchádzajúcej lekcie:

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

Takže, vlastnosti objektu path a element, ktoré sme odovzdávali do funkcie pri vytváraní routera, sú vlastnosti objektu Route. V skutočnosti, tento objekt má množstvo vlastností, ich možno nájsť v oficiálnej dokumentácii. V budúcnosti sa nám budú hodiť niektoré z nich:

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

Mohli sme použiť alternatívny JSX štýl a napísať vlastnosti ako props pre komponent Route, potom by náš kúsok kódu vyzeral takto:

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

A, samozrejme, bolo by potrebné pridať ešte pár riadkov do importu:

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

Oba uvedené štýly v lekcii sú rovnocenné. My v budúcnosti sa budeme držať prvého variantu.

Vezmite aplikáciu vytvorenú vámi v úlohách k predchádzajúcim lekciám. Skúste prepísať kúsok kódu pre vytvorenie routera (starý zatiaľ zakomentujte), použitím alternatívnej JSX syntaxe, uvedenej v lekcii. Uistite sa, že aplikácia funguje.

Vráťte na miesto celý starý kód, a nový odstráňte. Uistite sa, že aplikácia funguje.