Rutas en React Router

Las rutas (Routes) son la parte más importante de una aplicación en React Router. Consideremos un fragmento de código de la lección anterior:

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

Pues bien, las propiedades del objeto path y element, que pasamos a la función al crear el enrutador, son las propiedades del objeto Route. En realidad, este objeto tiene muchas propiedades, se pueden encontrar en la documentación oficial. En el futuro, nos serán útiles algunas de ellas:

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

Se podría haber utilizado un estilo JSX alternativo y escribir las propiedades como props para el componente Route, entonces nuestro fragmento de código se vería así:

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

Y, por supuesto, habría que añadir un par de líneas más en la importación:

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

Ambos estilos presentados en la lección son equivalentes. En el futuro, nos mantendremos con la primera variante.

Tome la aplicación creada por usted en las tareas de lecciones anteriores. Intente reescribir el fragmento de código para crear el enrutador (por ahora comente el antiguo), utilizando la sintaxis JSX alternativa presentada en la lección. Asegúrese de que la aplicación funcione.

Vuelva a colocar todo el código antiguo, y elimine el nuevo. Asegúrese de que la aplicación funcione.