Útvonalak a React Routerben

Az útvonalak (Routes) a React Router alkalmazás legfontosabb részei. Tekintsük át az előző leckéből származó kódrészletet:

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

Nos, a path és a element tulajdonságok, amelyeket átadtunk a függvénynek a router létrehozásakor, éppen a Route objektum tulajdonságai. Valójában ez az objektum számos tulajdonsággal rendelkezik, ezek megtalálhatók a hivatalos dokumentációban. A továbbiakban néhány közülük hasznos lesz számunkra:

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

Használhattunk volna alternatív JSX stílust is, és írhattuk volna a tulajdonságokat a Route komponens propsaiként, akkor a kódrészletünk így nézne ki:

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

És természetesen kellett volna hozzáadnunk még pár sort az importáláshoz:

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

A leckében bemutatott mindkét stílus egyenértékű. A továbbiakban mi az első változathoz fogjuk tartani magunkat.

Vegyétek azt az alkalmazást, amit az előző leckék feladataihoz készítettetek. Próbáljátok meg átírni a router létrehozásához szükséges kódrészletet (a régit egyelőre tegyétek megjegyzésbe), az alternatív JSX szintaxist használva, amelyet a leckében bemutattak. Győződjetek meg arról, hogy az alkalmazás működik.

Tegyétek vissza a helyére a régi kódot, az újat pedig távolítsátok el. Győződjetek meg arról, hogy az alkalmazás működik.