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:

routes/index.jsxexport 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í:

main.jsximport 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:

main.jsx{ index: true, element: <Index /> },