Njia katika React Router

Njia (Routes) ni sehemu muhimu zaidi ya programu ya React Router. Hebu tuchunguze kipande cha msimbo kutoka somo lilopita:

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

Basi, sifa za kitu path na element, ambazo tulizipita kwenye kitendo cha kuunda njia, ndizo sifa za kitu Route. Kweli, kitu hiki kina sifa nyingi, zinaweza kupatikana kwenye nyaraka rasmi. Baadaye, zitatusaidia baadhi yake:

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

Ingewezekana kutumia mtindo mbadala wa JSX na kuandika sifa kama vipengele vya kipengele cha Route, basi kipande chetu cha msimbo kingeonekana hivi:

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

Na, bila shaka, ingelihitajika kuongeza mistari michache zaidi kwenye usafirishaji:

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

Miundo yote miwili iliyotolewa kwenye somo ni sawa. Sisi baadaye tutashikilia chaguo la kwanza.

Chukua programu, iliyoundwa na wewe katika kazi za masomo yaliyopita. Jaribu kuandika upya kipande cha msimbo wa kuunda njia (ya zamani kwa sasa iwe kwenye maoni), ukitumia sintaksia mbadala ya JSX, iliyotolewa kwenye somo. Hakikisha, kuwa programu inafanya kazi.

Rudisha mahali pake msimbo wote wa zamani, na mpya uondoe. Hakikisha, kuwa programu inafanya kazi.