Indeksrute i React Router

I denne leksjonen vil vi lære hva indeksruter er.

La oss først ta hensyn til en ting. Når vi er på forsiden, ser vi til høyre bare en tom skjerm. Dette er fordi ingen av barnerutene passer med adressen /, og vi har ikke fortalt hva som skal vises i dette tilfellet. I slike tilfeller, for å unngå å vise en tom side, kan vi bruke en indeksrute - en barnerute som ikke har en sti, og dens element vises i forelderens Outlet når ingen av barnerutene passer. Ved hjelp av slike ruter kan vi plassere informasjon, eller statistikk, eller noe annet lignende. Som med vanlige ruter kan de brukes til datainnlasting.

La oss opprette filen index.jsx i mappen routes, og i den komponenten Index:

export default function Index() {
	return (
		<div>
			<p>Hei, React Router!</p>
			<p>Dette er en applikasjon for mine produkter :)</p>
		</div>
	);
}

La oss nå gå til main.jsx og importere komponenten vår Index der:

import Index from './routes/index';

Og som det første elementet i arrayet children legger vi til et objekt hvor egenskapen index er satt til true, og som element for visning vil komponenten vår Index være:

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

Ta applikasjonen du opprettet i oppgavene til forrige leksjon. Bruk materialet fra leksjonen, og legg til en indeksrute med adressen til hovedsiden med en eller annen tekst.