Indeksrute i React Router

I denne lektion vil vi lære, hvad indeksruter er.

Lad os først lægge mærke til én ting. Når vi er på forsiden, ser vi til højre bare en tom skærm. Det er fordi ingen af de underordnede ruter matcher adressen /, og vi har ikke fortalt, hvad der skal vises i dette tilfælde. I sådanne tilfælde, for at undgå at vise en tom side, kan man anvende en indeksrute - en sådan underordnet rute, som ikke har en sti, og hvis element vises i den overordnede Outlet når ingen af de underordnede ruter matcher. Med sådanne ruter kan man placere information, eller statistik, eller noget andet lignende. Som i tilfældet med almindelige ruter kan de bruges til at indlæse data.

Lad os oprette filen index.jsx i mappen routes, og i den en komponent Index:

routes/index.jsxexport default function Index() {
  return (
    <div>
      <p>Hej, React Router!</p>
      <p>Dette er en applikation for mine produkter :)</p>
    </div>
  );
}

Lad os nu gå til main.jsx og importere vores komponent Index der:

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

Og som det første element i arrayet children tilføjer vi et objekt, hvor egenskaben index er sat til true, og som element for visning vil være vores komponent Index:

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