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:

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

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

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