Route in React Router

Le route (Routes) sono la parte più importante di un'applicazione su React Router. Consideriamo un frammento di codice della lezione precedente:

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

Ebbene, le proprietà dell'oggetto path e element, che abbiamo passato alla funzione durante la creazione del router, sono le proprietà dell'oggetto Route. In realtà, questo oggetto ha molte proprietà, è possibile trovarle nella documentazione ufficiale. In futuro, alcune di esse ci saranno utili:

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

Si poteva utilizzare lo stile JSX alternativo e scrivere le proprietà come props per il componente Route, allora il nostro frammento di codice sarebbe apparso così:

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

E, naturalmente, sarebbe stato necessario aggiungere un paio di righe nell'import:

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

Entrambi gli stili presentati nella lezione sono equivalenti. Noi in seguito adotteremo la prima variante.

Prendete l'applicazione, creata da voi nei compiti delle lezioni precedenti. Provate a riscrivere il frammento di codice per la creazione del router (il vecchio per ora commentatelo), utilizzando la sintassi JSX alternativa, riportata nella lezione. Assicuratevi che l'applicazione funzioni.

Rimettete al suo posto tutto il vecchio codice, e togliete quello nuovo. Assicuratevi che l'applicazione funzioni.