Route Indice in React Router

In questa lezione scopriremo cosa sono le route indice.

Per cominciare, prestiamo attenzione a una cosa. Quando ci troviamo sulla pagina principale, a destra vediamo semplicemente uno schermo vuoto. Questo perché nessuna delle route figlie corrisponde all'indirizzo /, e non abbiamo specificato cosa visualizzare in questo caso. In una situazione del genere, per non mostrare una pagina vuota, si può utilizzare una route indice - una route figlia che non ha un percorso (path), e il cui elemento viene visualizzato nel Outlet genitore quando nessuna delle route figlie corrisponde. Utilizzando queste route si può posizionare qualche informazione, o statistiche, o qualcosa di simile. Come nel caso di quelle normali, possono essere utilizzate per il caricamento dei dati.

Creiamo il file index.jsx nella cartella routes, e al suo interno il componente Index:

export default function Index() {
	return (
		<div>
			<p>Ciao, React Router!</p>
			<p>Questa è un'applicazione per i miei prodotti :)</p>
		</div>
	);
}

Ora passiamo a main.jsx e importiamoci il nostro componente Index:

import Index from './routes/index';

E come primo elemento nell'array children aggiungiamo un oggetto, dove la proprietà index è impostata su true, e come elemento da visualizzare sarà il nostro componente Index:

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

Prendi l'applicazione creata da te nei compiti della lezione precedente. Utilizzando il materiale della lezione, aggiungi una route indice per la pagina principale con un testo a piacere.