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:

routes/index.jsxexport 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:

main.jsximport 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:

main.jsx{ index: true, element: <Index /> },