Indeks ruta u React Router

U ovoj lekciji ćemo saznati šta su indeks rute.

Za početak, obratimo pažnju na jednu stvar. Kada smo na početnoj stranici, desno vidimo samo prazan ekran. Sve zato što nijedna od podruta ne odgovara adresi /, a šta da prikažemo u ovom slučaju nismo rekli. U takvoj situaciji, da ne bi prikazivali praznu stranicu, možemo primeniti indeksnu rutu - takvu podrutu koja nema putanju, i njen element se prikazuje u roditeljskom Outlet onda, kada ne odgovara nijedna iz skupa podruta. Pomoću takvih ruta možemo smeštati neke informacije, ili statistiku, ili bilo šta slično. Kao i kod običnih, mogu se koristiti za učitavanje podataka.

Hajde da kreiramo fajl index.jsx u folderu routes, a u njemu komponentu Index:

export default function Index() {
	return (
		<div>
			<p>Zdravo, React Router!</p>
			<p>Ovo je aplikacija za moje proizvode :)</p>
		</div>
	);
}

Sada idemo u main.jsx i uvezimo tamo našu komponentu Index:

import Index from './routes/index';

A kao prvi element u niz children dodajmo objekat, gde je svojstvo index postavljeno na true, a kao element za prikaz će biti naša komponenta Index:

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

Uzmite aplikaciju koju ste kreirali u zadacima za prethodnu lekciju. Koristeći materijale lekcije, dodajte indeksnu rutu sa adresom početne strane sa nekim tekstom.