Маршрути в React Router

Маршрутите (Routes) са най-важната част на приложение с React Router. Нека разгледаме част от кода от предишния урок:

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

И така, свойствата на обекта path и element, които предавахме на функцията при създаване на рутера, са свойства на обекта 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';

И двата стила, показани в урока, са равностойни. Ние в бъдеще ще се придържаме към първия вариант.

Вземете приложението, създадено от вас в задачите към предишните уроци. Опитайте се да пренапишете частта от кода за създаване на рутера (стария засега го коментирайте), използвайки алтернативния JSX синтаксис, показан в урока. Уверете се, че приложението работи.

Върнете на място целия стар код, а новия премахнете. Уверете се, че приложението работи.