Indexová trasa v React Router

V této lekci se dozvíme, co jsou indexové trasy.

Nejprve si všimněme jedné věci. Když jsme na hlavní stránce, vidíme vpravo prázdnou obrazovku. Je to proto, že žádná z dceřiných tras neodpovídá adrese /, a co v tomto případě zobrazit, jsme neřekli. V takovém případě, abychom nezobrazovali prázdnou stránku, lze použít indexovou trasu - takovou dceřinou trasu, která nemá cestu, a její prvek se zobrazí v rodičovském Outlet tehdy, když nevyhovuje žádná ze sady dceřiných. Pomocí takových tras lze umístit nějaké informace, nebo statistiku, nebo ještě něco podobného. Stejně jako v případě obyčejných tras je lze použít pro načítání dat.

Vytvořme soubor index.jsx ve složce routes, a v něm komponentu Index:

export default function Index() {
	return (
		<div>
			<p>Ahoj, React Router!</p>
			<p>Toto je aplikace pro mé produkty :)</p>
		</div>
	);
}

Nyní přejděme do main.jsx a importujme tam naši komponentu Index:

import Index from './routes/index';

A jako první prvek do pole children přidejme objekt, kde vlastnost index je nastavena na true, a jako prvek pro zobrazení bude naše komponenta Index:

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

Vezměte aplikaci, kterou jste vytvořili v úkolech k minulé lekci. S využitím materiálů lekce přidejte indexovou trasu na adresu hlavní stránky s nějakým textem.