Роҳҳо дар React Router

Роҳҳо (Routes) қисми беҳамтои барнома дар React Router мебошанд. Биёед пораи коди аз дарси гузаштаро баррасӣ кунем:

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

Пас, хосиятҳои объекти path ва element, ки мо ба функция ҳангоми сохтани router медодем, ҳамон хосиятҳои объекти Route мебошанд. Дар асл, ин объект хосиятҳои бисёре дорад, онҳоро дар ҳуҷҷатҳо ёфтан мумкин аст. Дар оянда, баъзе аз онҳо ба мо кор меоянд:

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

Метеронист истифода бурдани услуби алтернативии JSX ва хосиятҳоро ба сурати пропсҳо барои компоненти Route навишт, онгоҳ пораи коди мо ин тавр мебуд:

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

Ва, албатта, бояд якчанд сатри дигарро ба импорт илова мекардем:

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

Ҳарду услуби дар дарс овардашуда баробарқимат мебошанд. Мо дар оянда аз варианти якум пайравӣ хоҳем кард.

Барномаеро, ки шумо дар вазифаҳо барои дарсҳои гузашта сохтаед, гиред. Кӯшиш кунед пораи коди сохтани router-ро аз нав нависед (куҳнаро то ҳол коммент кунед), истифода бурдани услуби JSX-и алтернативӣ, ки дар дарс оварда шудааст. Боварӣ ҳосил кунед, ки барнома кор мекунад.

Ҳама коди кӯҳнаро баргардонед, ва навро тоза кунед. Боварӣ ҳосил кунед, ки барнома кор мекунад.