Index útvonal a React Routerban

Ezen a leckén megtudjuk, mik azok az index útvonalak.

Kezdetként figyeljünk egy dologra. Amikor a főoldalon vagyunk, akkor jobbra egyszerűen egy üres képernyőt látunk. Ez azért van, mert egyik gyermek útvonal sem illeszkedik a / címre, és arra, hogy ebben az esetben mit jelenítsünk meg, nem mondtunk semmit. Ilyen esetben, hogy ne üres oldalt jelenítsünk meg, alkalmazhatunk index útvonalat - olyan gyermek útvonalat, amelynek nincs útvonala, és eleme akkor jelenik meg a szülő Outlet komponensében, amikor egyik gyermek útvonal sem illeszkedik. Az ilyen útvonalakkal lehet valamilyen információt, statisztikát vagy más hasonlót megjeleníteni. Akárcsak a szokásos útvonalak esetén, ezek is használhatók adatok betöltésére.

Hozzunk létre egy index.jsx fájlt a routes mappában, és benne egy Index komponenst:

export default function Index() {
	return (
		<div>
			<p>Hi, React Router!</p>
			<p>This is an application for my products :)</p>
		</div>
	);
}

Most menjünk a main.jsx fájlba és importáljuk be oda a Index komponensünket:

import Index from './routes/index';

És a children tömb első elemeként adjunk hozzá egy objektumot, ahol a index tulajdonság true értékre van állítva, és a megjelenítendő elem a Index komponensünk lesz:

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

Vegyétek azt az alkalmazást, amit az előző lecke feladataihoz készítettetek. A lecke anyagait felhasználva adjatok hozzá egy index útvonalat a főoldal címéhez valamilyen szöveggel.