React Router-da Marshrutlar

Marshrutlar (Routes) React Router asosidagi ilovalarning eng muhim qismidir. Oldingi darsdagi kod parchasini ko'rib chiqamiz:

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

Demak, router yaratishda funksiyaga uzatgan path va element xossalari Route obyektining xususiyatlaridir. Aslida, bu obyekt juda ko'p xususiyatlarga ega, ularni rasmiy hujjatlarda topish mumkin. Kelajakda, ulardan ba'zilari bizga kerak bo'ladi:

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

Muqobil JSX uslubidan foydalanish mumkin edi va Route komponenti uchun xossalarni prop sifatida yozish mumkin edi, unda bizning kod parchamiz shunday ko'rinishga ega bo'lar edi:

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

Va, albatta, importga yana bir nechta qator qo'shish kerak edi:

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

Darsda keltirilgan ikkala uslub ham barobar. Biz kelajakda birinchi variantdan foydalanamiz.

Oldingi darslar topshiriqlarida yaratilgan ilovingizni oling. Router yaratish kodini (eskisini hozircha kommentga oling) darsda keltirilgan muqobil JSX sintaksisidan foydalanib qayta yozishga harakat qiling. Ilova ishlayotganiga ishonch hosil qiling.

Barcha eski kodni o'rniga qaytarib qo'ying, yangisini olib tashlang. Ilova ishlayotganiga ishonch hosil qiling.