Rute u React Router-u

Rute (Routes) su najvažniji deo aplikacije na React Router-u. Pogledajmo deo koda iz prethodne lekcije:

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

Dakle, svojstva objekta path i element, koja smo prosledili u funkciju prilikom kreiranja rutera, jesu svojstva objekta Route. Zapravo, ovaj objekat ima mnogo svojstava, ona se mogu naći u zvaničnoj dokumentaciji. U nastavku, neka od njih će nam zatrebati:

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

Moglo se koristiti alternativni JSX stil i napisati svojstva u vidu props-a za komponentu Route, tada bi naš deo koda izgledao ovako:

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

I, naravno, bilo bi potrebno dodati još par linija u import:

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

Oba stila data u lekciji su ravnopravna. Mi ćemo se u nastavku pridržavati prvog varijanta.

Uzmite aplikaciju, koju ste kreirali u zadacima za prethodne lekcije. Pokušajte prepisati deo koda za kreiranje rutera (stari za sada zakomentarišite), koristeći alternativni JSX sintaksu, dat u lekciji. Uverite se, da aplikacija radi.

Vratite na mesto ceo stari kod, a novi uklonite. Uverite se, da aplikacija radi.