Indexová trasa v React Router

V tejto lekcii sa dozvieme, čo sú indexové trasy.

Na začiatok si všimnime jednu vec. Keď sme na hlavnej stránke, tak vpravo vidíme jednoducho prázdnu obrazovku. Všetko preto, že žiadna z podradených trás nepasuje na adresu /, a čo v tomto prípade zobraziť sme nepovedali. V takom prípade, aby sme nezobrazovali prázdnu stránku, môžeme použiť indexovú trasu - takú podradenú trasu, ktorá nemá cestu, a jej prvok sa zobrazí v nadradenom Outlet vtedy, keď nepasuje žiadna zo sady podradených. Pomocou takýchto trás môžeme umiestňovať akékoľvek informácie, alebo štatistiky, alebo ešte niečo podobné. Rovnako ako v prípade s obyčajnými, môžu byť použité pre načítanie dát.

Vytvorme súbor index.jsx v priečinku routes, a v ňom komponent Index:

export default function Index() {
	return (
		<div>
			<p>Ahoj, React Router!</p>
			<p>Toto je aplikácia pre moje produkty :)</p>
		</div>
	);
}

Teraz prejdime do main.jsx a importujme tam náš komponent Index:

import Index from './routes/index';

A ako prvý prvok do poľa children pridajme objekt, kde vlastnosť index je nastavená na true, a ako prvok pre zobrazenie bude náš komponent Index:

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

Vezmite aplikáciu, ktorú ste vytvorili v úlohách k minulej lekcii. Použitím materiálov z lekcie pridajte indexovú trasu s adresou hlavnej stránky s nejakým textom.