Trasy w React Router

Trasy (Routes) są najważniejszą częścią aplikacji React Router. Rozważmy kawałek kodu z poprzedniej lekcji:

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

A więc, właściwości obiektu path i element, które przekazywaliśmy do funkcji przy tworzeniu routera, są właściwościami obiektu Route. W rzeczywistości, ten obiekt ma wiele właściwości, ich listę można znaleźć w oficjalnej dokumentacji. W przyszłości, przydadzą się niektóre z nich:

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

Można było skorzystać z alternatywnego stylu JSX i zapisać właściwości jako propsy dla komponentu Route, wtedy nasz kawałek kodu wyglądałby tak:

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

I, oczywiście, trzeba by było dodać jeszcze kilka linijek do importu:

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

Oba przedstawione w lekcji style są równorzędne. My w dalszej części będziemy trzymać się pierwszego wariantu.

Weź aplikację stworzoną przez Ciebie w zadaniach do poprzednich lekcji. Spróbuj przepisać kawałek kodu do tworzenia routera (stary na razie zakomentuj), używając alternatywnej składni JSX, przedstawionej w lekcji. Upewnij się, że aplikacja działa.

Przywróć na miejsce cały stary kod, a nowy usuń. Upewnij się, że aplikacja działa.