Рути во React Router

Рутите (Routes) се најважниот дел на апликацијата React Router. Да го разгледаме делот од кодот од претходната лекција:

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

Па, својствата на објектот path и element, кои ги пренесувавме во функцијата при креирање на рутерот, се својства на објектот Route. Всушност, овој објект има многу својства, тие можат да се најдат во официјалната документација. Во продолжение, ќе ни требаат некои од нив:

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

Можеше да се искористи алтернативен JSX стил и да се напишат својствата како пропси за компонентата Route, тогаш нашиот дел од кодот би изгледал вака:

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

И, се разбира, ќе требаше да се додадат уште неколку линии во импортот:

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

Двата стила приведени во лекцијата се еднакво вредни. Ние во продолжение ќе се придржуваме кон првиот вариант.

Земете ја апликацијата, креирана од вас во задачите од претходните лекции. Обидете се да го препишете делот од кодот за креирање на рутерот (стариот засега закоментирајте го), користејќи го алтернативниот JSX синтакс, приведен во лекцијата. Уверете се дека апликацијата работи.

Вратете на место целиот стар код, а новиот отстранете го. Уверете се дека апликацијата работи.