Ruta índice en React Router

En esta lección aprenderemos qué son las rutas índice.

Para empezar, prestemos atención a una cosa. Cuando estamos en la página principal, a la derecha vemos simplemente una pantalla vacía. Esto se debe a que ninguna de las rutas hijas coincide con la dirección /, y no hemos especificado qué mostrar en este caso. En tal situación, para no mostrar una página vacía, se puede utilizar una ruta índice: una ruta hija que no tiene path, y cuyo elemento se muestra en el Outlet padre cuando ninguna del conjunto de rutas hijas coincide. Con estas rutas se puede colocar cualquier información, estadísticas o algo similar. Al igual que en el caso de las rutas normales, se pueden usar para cargar datos.

Creemos el archivo index.jsx en la carpeta routes, y en él el componente Index:

export default function Index() {
	return (
		<div>
			<p>¡Hola, React Router!</p>
			<p>Esta es una aplicación para mis productos :)</p>
		</div>
	);
}

Ahora vayamos a main.jsx e importemos nuestro componente Index allí:

import Index from './routes/index';

Y como primer elemento en el array children agreguemos un objeto donde la propiedad index esté establecida en true, y como elemento a mostrar esté nuestro componente Index:

{ index: true, element: <Index /> },

Tome la aplicación que creó en las tareas de la lección anterior. Usando los materiales de la lección, agregue una ruta índex en la dirección de la página principal con algún texto.