Trasy v React Router

Trasy (Routes) jsou nejdůležitější částí aplikace na React Router. Podívejme se na kousek kódu z předchozí lekce:

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

Takže, vlastnosti objektu path a element, které jsme předali do funkce při vytváření routeru, jsou vlastnosti objektu Route. Ve skutečnosti, tento objekt má mnoho vlastností, jejich seznam najdete v oficiální dokumentaci. V budoucnu se nám budou hodit některé 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>;
}

Mohli bychom použít alternativní JSX styl a zapsat vlastnosti jako props pro komponentu Route, pak by náš kousek kódu vypadal takto:

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

A samozřejmě by bylo nutné přidat ještě pár řádků do importu:

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

Oba styly uvedené v lekci jsou rovnocenné. My se v budoucnu budeme držet první varianty.

Vezměte aplikaci, kterou jste vytvořili v úkolech k předchozím lekcím. Zkuste přepsat kousek kódu pro vytvoření routeru (starý zatím zakomentujte), pomocí alternativního JSX syntaxe, uvedeného v lekci. Ujistěte se, že aplikace funguje.

Vraťte na místo veškerý starý kód, a nový odstraňte. Ujistěte se, že aplikace funguje.