Indeksa maršruts React Router

Šajā nodarbībā mēs uzzināsim, kas ir indeksa maršruti.

Sākumā pievērsīsim uzmanību vienai lietai. Kad atrodamies galvenajā lapā, tad labajā pusē mēs redzam vienkārši tukšu ekrānu. Tas ir tāpēc, ka neviens no bērnu maršrutiem neatbilst adresei /, un ko izvadīt šajā gadījumā mēs neesam norādījuši. Šādā situācijā, lai nerādītu tukšu lapu, var izmantot indeksa maršrutu - tādu bērnu maršrutu, kuram nav ceļa, un tā elements tiek rādīts vecāka Outlet tad, kad neatbilst neviens no bērnu kopas. Ar šādu maršrutu palīdzību var ievietot kādu informāciju, vai statistiku, vai ko citu līdzīgu. Tāpat kā parastajos tos var izmantot datu ielādei.

Izveidosim failu index.jsx mapē routes, un tajā komponentu Index:

routes/index.jsxexport default function Index() {
  return (
    <div>
      <p>Sveiki, React Router!</p>
      <p>Šī ir mana produktu lietotne :)</p>
    </div>
  );
}

Tagad dosimies uz main.jsx un importēsim tur mūsu komponentu Index:

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

Un pirmo elementu masīvā children pievienosim objektu, kurā īpašība index ir iestatīta uz true, un kā elementu attēlošanai būs mūsu komponents Index:

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