Indexroute in React Router

In deze les leren we wat indexroutes zijn.

Laten we eerst iets opmerken. Wanneer we ons op de hoofdpagina bevinden, zien we rechts gewoon een leeg scherm. Dat komt omdat geen van de onderliggende routes overeenkomt met het adres /, en we hebben niet gezegd wat er in dat geval moet worden weergegeven. In zo'n geval, om geen lege pagina te tonen, kan men een indexroute gebruiken - een onderliggende route die geen pad heeft, en waarvan het element wordt weergegeven in de bovenliggende Outlet wanneer geen van de onderliggende routes overeenkomt. Met dergelijke routes kan men informatie, statistieken of iets dergelijks plaatsen. Net als bij gewone routes kunnen ze worden gebruikt voor het laden van data.

Laten we een bestand index.jsx aanmaken in de map routes, en daarin een component Index:

export default function Index() {
	return (
		<div>
			<p>Hallo, React Router!</p>
			<p>Dit is een applicatie voor mijn producten :)</p>
		</div>
	);
}

Laten we nu naar main.jsx gaan en daar onze component Index importeren:

import Index from './routes/index';

En voeg als eerste element in de array children een object toe, waar de eigenschap index op true is gezet, en als element voor weergave onze component Index zal zijn:

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

Neem de applicatie die je hebt gemaakt in de opdrachten bij de vorige les. Gebruikmakend van de lesmaterialen, voeg een indexroute toe voor de hoofdpagina met een willekeurige tekst.