Maršrutai React Router

Maršrutai (Routes) yra svarbiausia React Router programos dalis. Panagrinėkime kodo fragmentą iš praeitos pamokos:

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

Taigi, objekto savybės path ir element, kurias perdavėme į funkciją kuriant maršrutizatorių, yra objekto Route savybės. Tiesą sakant, šis objektas turi daug savybių, jas galima rasti oficialioje dokumentacijoje. Ateityje, kai kurios iš jų mums prireiks:

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

Galima būtų pasinaudoti alternatyviu JSX stiliumi ir parašyti savybes kaip props'us komponentui Route, tada mūsų kodo fragmentas atrodytų taip:

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

Ir, žinoma, reikėtų pridėti dar porą eilučių į importą:

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

Abu pamokoje pateikti stiliai yra lygiaverčiai. Mes toliau laikysimės pirmojo varianto.

Paimkite programą, kurią sukūrėte užduotyse ankstesnėse pamokose. Pabandykite perrašyti kodo fragmentą maršrutizatoriaui sukurti (senąjį kol užkomentuokite), naudodami alternatyviąją JSX sintaksę, pateiktą pamokoje. Įsitikinkite, kad programa veikia.

Grąžinkite į vietą visą senąjį kodą, o naująjį pašalinkite. Įsitikinkite, kad programa veikia.