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 синтаксисин колдонуп кайра жазууга аракет кылыңыз. Колдонмо иштеп жатканына көзүңүз менен ишенип көрүңүз.

Эски кодду кайра ордуна койсок, жаңысын алып салыңыз. Колдонмо иштеп жатканына көзүңүз менен ишенип көрүңүз.