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

Дарсда келтирилган иккиala услуб ҳам баробар қийматлидир. Биз кейинчалик биринчи вариантдан фойдаланамиз.

Утган дарсларнинг вазифаларида яратган иловангизни олинг. Роутер яратиш учун код богланимини (эскисини ҳозирча комментарийга олинг) дарсда келтирилган альтернатив JSX синтаксиси ёрдамида қайта ёзиб кўринг. Илова ишлашига ишонч ҳосил қилинг.

Ҳамма эски кодни ўрнига қайтаринг, янгисини эса олиб ташланг. Илова ишлашига ишонч ҳосил қилинг.