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:

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

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

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