React Router-da indeks ýoly

Bu sapakda biz indeks ýollarynyň nämäni aňladýandygyny öreneris.

Başlangyçda, bir zada üns bereliň. Baş sahypada bolanymyzda, sag tarapda diňe boş ekran görýäris. Sebäbi çagyrylan ýollaryň hiç biri / salgysyna gabat gelmeýär, we bu ýagdaýda näme görkezmelidigini aýtmandyk. Şeýle ýagdaýlarda, boş sahypa görkezmekden gaça durmak üçin indeks ýoly ulanup bolýar - bu ýol, ýolunyň özi ýok we onuň elementleri ata Outlet içinde çagyrylan ýollaryň hiç biri gabat gelmeýän wagty görkezilýär. Bu ýollary ulanmak bilen birneme maglumat, ýa-da statistika, ýa-da şuňa meňzeş zatlar ýerleşdirilip bilner. Adaty ýollary ulanýan ýaly, olary maglumat ýüklemek üçin hem ulanyp bolýar.

Geliň, routes papkasynyň içinde index.jsx failyny döredeliň we onuň içinde Index komponentini düzeliň:

routes/index.jsxexport default function Index() {
  return (
    <div>
      <p>Salam, React Router!</p>
      <p>Bu meniň önümlerim üçin programma :)</p>
    </div>
  );
}

Indi main.jsx failyna geçeliň we Index komponentimizi şol ýere import edeliň:

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

children massiwiniň ilkinji element hökmünde, index aýratynlygy true we görkezilýän element hökmünde bizim Index komponentimiz bolan bir obýekt goşalyň:

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