React Router-da Marsrutlar

Marsrutlar (Routes) React Router esasinda qurulmus tetbiqin en vacib hissəsidir. Kecən dersdeki kodu bir deye nezerden kecirek:

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

Beləliklə, router yaradan funksiyaya iletmish oldugumuz obyektin path ve element xasseleri, eslinde Route obyektinin xasseleridir. Əslinde, bu obyektin coxlu xasseleri var, onları resmi dokumentasiyada tapa bilersiz. Gelecekde, onlarin bəzileri bizim işimize yarayacaq:

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

Alternativ JSX stilinden istifade ederek xasseleri Route komponenti ucün prop kimi yazmaq olardi, onda kodumuzun o bir parçasi belə görünərdi:

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

Və, əlbəttə, importa daha bir neçə sətir əlavə etmək lazım gələrdi:

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

Derste gosterilen her iki stil beraberdir. Biz gelecekde birinci varianta üstünlük vereceyik.

Kecən derslerin tapşırıqlarında yaratdığınız proqramı götürün. Router yaratmaq üçün olan kod parçasını derste gosterilen alternativ JSX sintaksisi ile yeniden yazmağa çalışın (köhnə kodu hələlik şərhə alın). Tetbiqin işlediyine emin olun.

Kohne kodu yerine qaytarın, yenisini ise silin. Tetbiqin işlediyine emin olun.