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ň:

export 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ň:

import 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ň:

{ index: true, element: <Index /> },

Öňki sapagyň tabşyryklarynda döreden programmanyňyzy alyň. Sapak materiýalaryny ulanmak bilen, baş sahypa üçin birneme teksti bolan indeks ýoluny goşuň.