Indeksireitti React Routerissa

Tällä oppitunnilla opimme, mitä indeksireitit ovat.

Aluksi kiinnittäkäämme huomio yhteen asiaan. Kun olemme etusivulla, oikealla puolella näemme vain tyhjän näytön. Syynä on, että mikään lapsireiteistä ei vastaa osoitetta /, emmekä ole kertoneet, mitä tässä tapauksessa tulostaa. Tällöin, että ei näytetä tyhjää sivua, voidaan käyttää indeksireittiä - sellaista lapsireittiä, jolla ei ole polkua, ja sen elementti näytetään vanhemman Outlet:in sisällä silloin, kun mikään lapsijoukon reiteistä ei vastaa. Tällaisia reittejä voidaan käyttää esimerkiksi jonkinlaisten tietojen, tilastojen tai muun vastaavan sijoittamiseen. Kuten tavallisten reittien tapauksessa, niitä voidaan käyttää tietojen hakemiseen.

Luodaan tiedosto index.jsx kansioon routes, ja siinä komponentti Index:

export default function Index() {
	return (
		<div>
			<p>Hei, React Router!</p>
			<p>Tämä on sovellukseni tuotteilleni :)</p>
		</div>
	);
}

Siirrytään nyt tiedostoon main.jsx ja tuodaan sinne komponenttimme Index:

import Index from './routes/index';

Ja lisätään ensimmäiseksi elementiksi taulukkoon children olion, jossa ominaisuus index asetettu arvoon true, ja elementtinä näytettäväksi on komponenttimme Index:

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

Ota edellisen oppitunnin tehtävissä luomasi sovellus. Hyödynnä oppitunnin materiaaleja ja lisää indeksireitti pääsivun osoitteeseen jollain tekstillä.