Indexrutt i React Router

I den här lektionen kommer vi att lära oss vad indexrutter är.

Låt oss först uppmärksamma en sak. När vi är på startsidan ser vi till höger bara en tom skärm. Det beror på att ingen av barnrutterna matchar adressen /, och vi har inte sagt vad som ska visas i det här fallet. I ett sådant fall, för att inte visa en tom sida, kan man använda en indexrutt - en barnrutt som inte har en sökväg, och dess element visas i den föräldralska Outlet när ingen av barnrutterna matchar. Med sådana rutter kan man placera information, eller statistik, eller något annat liknande. Som i fallet med vanliga rutter kan de användas för att ladda data.

Låt oss skapa filen index.jsx i mappen routes, och i den komponenten Index:

export default function Index() {
	return (
		<div>
			<p>Hej, React Router!</p>
			<p>Det här är en applikation för mina produkter :)</p>
		</div>
	);
}

Låt oss nu gå till main.jsx och importera vår komponent Index där:

import Index from './routes/index';

Och som första element i arrayen children lägger vi till ett objekt där egenskapen index är satt till true, och som element för visning blir vår komponent Index:

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

Ta applikationen du skapade i uppgifterna från förra lektionen. Använd materialet från lektionen och lägg till en indexrutt på startsidan med någon text.