Indeksna pot v React Router

V tej lekciji bomo izvedeli, kaj so indeksne poti.

Za začetek bodimo pozorni na eno stvar. Ko smo na domači strani, desno vidimo samo prazen zaslon. Vse zato, ker nobena od podrejenih poti ne ustreza naslovu /, in kaj prikazati v tem primeru nismo navedli. V takem primeru, da ne bi prikazovali prazne strani, lahko uporabimo indeksno pot - takšno podrejeno pot, ki nima poti, in njen element se prikaže v starševskem Outlet takrat, ko ne ustreza nobena iz niza podrejenih. S takšnimi potmi lahko postavljamo kakšne informacije, ali statistiko, ali še kaj podobnega. Tako kot v primeru z običajnimi jih lahko uporabimo za nalaganje podatkov.

Ustvarimo datoteko index.jsx v mapi routes, in v njej komponento Index:

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

Zdaj pa pojdimo v main.jsx in uvažajmo našo komponento Index:

import Index from './routes/index';

In kot prvi element v matriko children dodajmo objekt, kjer je lastnost index nastavljena na true, in kot element za prikaz bo naša komponenta Index:

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

Vzemite aplikacijo, ki ste jo ustvarili v nalogah za prejšnjo lekcijo. Z uporabo gradiva lekcije, dodajte indeksno pot z naslovom domače strani z nekakšnim besedilom.