Rruga Indeksuese në React Router

Në këtë mësim do të mësojmë se çfarë janë rrugët indeksuese.

Për fillim, le t'i kushtojmë vëmendje një gjëje. Kur jemi në faqen kryesore, në të djathtë shohim thjesht një ekran bosh. Kjo ndodh sepse asnjë nga rrugët fëmijë nuk përputhet me adresën /, dhe ne nuk kemi thënë çfarë të shfaqet në këtë rast. Në situata të tilla, për të shmangur shfaqjen e një faqeje të zbrazët, mund të përdoret rruga indeksuese - një rrugë fëmijë që nuk ka shteg, dhe elementi i saj shfaqet në Outlet prind kur asnjë nga rrugët fëmijë nuk përputhet. Me anë të rrugëve të tilla mund të vendosni informacion, ose statistika, ose diçka tjetër të ngjashme. Ashtu si në rastin me ato të zakonshmet, ato mund të përdoren për të ngarkuar të dhëna.

Le të krijojmë skedarin index.jsx në dosjen routes, dhe në të komponentin Index:

export default function Index() {
	return (
		<div>
			<p>Përshëndetje, React Router!</p>
			<p>Kjo është një aplikacion për produktet e mia :)</p>
		</div>
	);
}

Tani le të shkojmë në main.jsx dhe ta importojmë atje komponentin tonë Index:

import Index from './routes/index';

Dhe si element të parë në vargun children le të shtojmë një objekt, ku vetia index është vendosur në true, dhe si element për shfaqje do të jetë komponenti ynë Index:

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

Merrni aplikacionin e krijuar nga ju në detyrat e mësimit të kaluar. Duke përdorur materialet e mësimit, shtoni një rrugë indeksuese në faqen kryesore me një tekst.