Poti v React Router

Poti (Routes) so najpomembnejši del aplikacije v React Router. Oglejmo si košček kode iz prejšnje lekcije:

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

Torej, lastnosti objekta path in element, ki smo jih posredovali funkciji pri ustvarjanju usmerjevalnika, so lastnosti objekta Route. Pravzaprav ima ta objekt številne lastnosti, ki jih lahko najdete v uradni dokumentaciji. V nadaljevanju nam bodo prišle prav nekatere izmed njih:

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

Lahko bi uporabili alternativni JSX slog in zapisali lastnosti kot podatke (props) za komponento Route, potem bi naš košček kode izgledal takole:

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

In seveda bi morali dodati še nekaj vrstic v uvoz:

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

Oba sloga, predstavljena v lekciji, sta enakovredna. V nadaljevanju se bomo držali prve možnosti.

Vzemite aplikacijo, ki ste jo ustvarili v nalogah za prejšnje lekcije. Poskusite prepisati del kode za ustvarjanje usmerjevalnika (starega za zdaj zakomentirajte), z uporabo alternativne JSX sintakse, prikazane v lekciji. Prepričajte se, da aplikacija deluje.

Vrnite na mesto celotno staro kodo, novo pa odstranite. Prepričajte se, da aplikacija deluje.