Indeksmarsruut React Routeris

Selles õppetükis saame teada, mis on indeksmarsruudid.

Alustuseks pöörakem tähelepanu ühele asjale. Kui oleme pealehel, siis paremal näeme lihtsalt tühja ekraani. Kõik sellepärast, et ükski lapsmarsruutidest ei sobi aadressiga /, ja mida sel juhul kuvada, me ei öelnud. Sellisel juhul, et mitte kuvada tühja lehte, saab rakendada indeksmarsruuti - sellist lapsmarsruuti, millel pole teed, ja selle element kuvatakse vanema Outlet juhul, kui ükski lapsmarsruutidest ei sobi. Selliste marsruutide abil saab paigutada mingit infot, või statistikat, või veel midagi sarnast. Nagu tavaliste puhul, saab neid kasutada andmete laadimiseks.

Loome faili index.jsx kaustas routes, ja selles komponendi Index:

routes/index.jsxexport default function Index() {
  return (
    <div>
      <p>Tere, React Router!</p>
      <p>See on rakendus minu toodete jaoks :)</p>
    </div>
  );
}

Nüüd liigume faili main.jsx ja impordime sinna oma komponendi Index:

main.jsximport Index from './routes/index';

Ja esimese elemendina massiivi children lisame objekti, kus omadus index on seatud väärtusele true, ja elemendina kuvatakse meie komponent Index:

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