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 синтаксисін қолданып қайта жазуға тырысыңыз (ескіні уақытша түсініктемеге алыңыз). Қолданбаның жұмыс істейтініне көз жеткізіңіз.

Ескі кодты орнына қайтарып, жаңасын алып тастаңыз. Қолданбаның жұмыс істейтініне көз жеткізіңіз.