Руте у 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 синтаксу, наведену у лекцији. Уверите се да апликација ради.

Вратите на место сав стари код, а нови уклоните. Уверите се да апликација ради.