Ruta Index în React Router

În această lecție vom afla ce sunt rutele index.

Pentru început, să acordăm atenție unui lucru. Când ne aflăm pe pagina principală, în dreapta vedem doar un ecran gol. Totul pentru că niciuna dintre rutele copil nu se potrivește cu adresa /, iar ce să afișăm în acest caz nu am spus. În astfel de cazuri, pentru a nu afișa o pagină goală, putem folosi ruta index - o rută copil care nu are cale, iar elementul ei este afișat în Outlet-ul părinte atunci, când nu se potrivește niciuna dintre setul de rute copil. Cu astfel de rute putem plasa orice informație, statistici sau ceva similar. La fel ca în cazul celor obișnuite, acestea pot fi folosite pentru încărcarea datelor.

Să creem fișierul index.jsx în folderul routes, iar în el componenta Index:

export default function Index() {
	return (
		<div>
			<p>Salut, React Router!</p>
			<p>Aceasta este o aplicație pentru produsele mele :)</p>
		</div>
	);
}

Acum să mergem în main.jsx și să importăm acolo componenta noastră Index:

import Index from './routes/index';

Și primul element din array-ul children să adăugăm un obiect, unde proprietatea index este setată la true, iar ca element pentru afișare va fi componenta noastră Index:

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

Luați aplicația creată de dvs. în sarcinile lecției trecute. Folosind materialele lecției, adăugați o rută index cu adresa paginii principale cu un text oarecare.