Indeksinis maršrutas React Router

Šioje pamokoje sužinosime, kas yra indeksiniai maršrutai.

Pirmiausia atkreipkime dėmesį į vieną dalyką. Kai esame pagrindiniame puslapyje, dešinėje matome tiesiog tuščią ekraną. Taip yra todėl, kad nė vienas iš vaikinių maršrutų neatitinka adreso /, o ką rodyti tokiu atveju mes nepasakėme. Tokiu atveju, kad nerodytumėte tuščio puslapio, galite naudoti indeksinį maršrutą - tokį vaikinį maršrutą, kuris neturi kelio, ir jo elementas rodomas tėviniame Outlet tada, kai neatitinka nė vienas iš vaikinių maršrutų rinkinio. Naudodami tokius maršrutus galite pateikti kokią nors informaciją, arba statistiką, arba dar ką nors panašaus. Kaip ir įprastų maršrutų atveju, juos galima naudoti duomenų įkėlimui.

Sukurkime failą index.jsx aplanke routes, o jame komponentą Index:

export default function Index() {
	return (
		<div>
			<p>Sveiki, React Router!</p>
			<p>Tai yra mano produktų programa :)</p>
		</div>
	);
}

Dabar pereikime į main.jsx ir importuokime ten savo komponentą Index:

import Index from './routes/index';

O pirmuoju elementu į masyvą children pridėkime objektą, kur savybė index nustatyta į true, o kaip elementas rodymui bus mūsų komponentas Index:

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

Paimkite programą, kurią sukūrėte užduotyse prie ankstesnės pamokos. Naudodamiesi pamokos medžiaga, pridėkite indeksinį maršrutą su pagrindinio puslapio adresu su kokių nors tekstu.