Maršruti React Router

Maršruti (Routes) ir svarīgākā daļa React Router lietotnē. Apskatīsim koda fragmentu no iepriekšējās nodarbības:

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

Tātad, objekta īpašības path un element, kuras mēs nododām funkcijā, veidojot maršrutētāju, ir objekta Route īpašības. Patiesībā, šim objektam ir daudz īpašību, tās var atrast oficiālajā dokumentācijā. Turpmāk, dažas no tām mums noderēs:

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

Varēja izmantot alternatīvu JSX stilu un rakstīt īpašības kā props komponentam Route, tad mūsu koda fragments izskatītos šādi:

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

Un, protams, vajadzētu pievienot vēl pāris rindiņas importam:

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

Abi nodarbībā dotie stili ir līdzvērtīgi. Mēs turpmāk pieturēsimies pie pirmā varianta.

Paņemiet lietotni, ko izveidojāt uzdevumos iepriekšējām nodarbībām. Pamēģiniet pārrakstīt koda daļu maršrutētāja izveidošanai (veco pagaidā apskomentējiet), izmantojot alternatīvo JSX sintaksi, doto nodarbībā. Pārliecinieties, ka lietotne strādā.

Atgrieziet vietā visu veco kodu, un noņemiet jauno. Pārliecinieties, ka lietotne strādā.