Rrugët në React Router

Rrugët (Routes) janë pjesa më e rëndësishme e një aplikacioni në React Router. Le të shqyrtojmë një copëzim kodi nga mësimi i kaluar:

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

Pra, vetitë e objektit path dhe element, që i kemi kaluar në funksion gjatë krijimit të ruterit, janë vetitë e objektit Route. Në fakt, ky objekt ka shumë veti, ato mund të gjenden në dokumentacionin zyrtar. Në të ardhmen, disa prej tyre do të jenë të dobishme për ne:

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

Mund të ishte përdorur stili alternativ JSX dhe të shkruheshin vetitë në formën e propseve për komponentin Route, atëherë copëzimi ynë i kodit do të dukej kështu:

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

Dhe, sigurisht, do të duhej shtuar edhe disa rreshta të tjerë në import:

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

Të dy stilet e paraqitura në mësim janë ekuivalente. Ne në të ardhmen do të përmbahemi te varianti i parë.

Merrni aplikacionin e krijuar nga ju në detyrat e mësimeve të kaluara. Provoni të rishkruani copëzimin e kodit për krijimin e ruterit (e vjetrën për momentin komentojeni), duke përdorur sintaksën alternative JSX, të paraqitur në mësim. Sigurohuni që aplikacioni funksionon.

Ktheni në vend të gjithë kodin e vjetër, dhe të rinë hiqni. Sigurohuni që aplikacioni funksionon.