Երթուղիներ 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 ոճ և գրել հատկությունները որպես props Route կոմպոնենտի համար, ապա մեր կոդի հատվածը կունենար հետևյալ տեսքը․

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

Եվ, իհարկե, անհրաժեշտ կլիներ ավելացնել ևս մի քանի տող իմպորտում․

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

Դասում բերված երկու ոճերը հավասարազոր են։ Մենք հետագայում կպահպանենք առաջին տարբերակը։

Վերցրեք ձեր ստեղծած հավելվածը նախորդ դասերի առաջադրանքներում։ Փորձեք վերագրել ռուտեր ստեղծելու կոդի հատվածը (հինը առայժմ մեկնաբանեք), օգտագործելով դասում բերված այլընտրանքային JSX շարահյուսությունը։ Համոզվեք, որ հավելվածն աշխատում է։

Վերադարձրեք տեղում ամբողջ հին կոդը, իսկ նորը հեռացրեք։ Համոզվեք, որ հավելվածն աշխատում է։