React Router-daky Ýollaryň gözlegi

Ýollaryň gözlegi (Routes) React Router esasynda işlenen programma üçün iň möhüm bölümdir. Öňki sapakdaky kod parçasyna seredeliň:

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

Şeýlelik bilen, router döredilýärkä funkşiýa geçirilen path we element aýratynlyklary, Route obyektiniň aýratynlyklarydyr. Aslynda, bu obyktiň köp sanly aýratynlyklary bar, olary resminamada tapyp bolýar. Indiki wagtda, olaryň käbiri biz üçin peýdaly bolar:

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

Beýleki JSX stilinden peýdalanyp, Route komponenti üçin props görnüşinde aýratynlyklary ýazmak mümkin, onda bizim kod parçamyz şuňa meňzeş bolar:

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

We, elbetde, importa ýene bir näçe setir goşmaly bolar:

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

Sapakda görkezilen iki stiliň hemmesi deň derejede. Biz indiki wagtda birinji wariantdan tutuşarys.

Öňki sapaklardaky tabşyryklar bilen döreden programmaňyzy alyň. Router döretmek üçin kod parçasyny (köne kodyny häzirçe kommentariýa alyň) sapakda görkezilen beýleki JSX sintaksisi bilen ýazmaga synanyşyň. Programmanyň işleýändigine göz ýetiriň.

Köne kodyň ählisini ýerine dolandyryň, täzesini bolsa aýyryň. Programmanyň işleýändigine göz ýetiriň.