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:

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

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

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