Indeksmarsruut React Routeris

Selles õppetükis saame teada, mis on indeksmarsruudid.

Alustuseks pöörakem tähelepanu ühele asjale. Kui oleme pealehel, siis paremal näeme lihtsalt tühja ekraani. Kõik sellepärast, et ükski lapsmarsruutidest ei sobi aadressiga /, ja mida sel juhul kuvada, me ei öelnud. Sellisel juhul, et mitte kuvada tühja lehte, saab rakendada indeksmarsruuti - sellist lapsmarsruuti, millel pole teed, ja selle element kuvatakse vanema Outlet juhul, kui ükski lapsmarsruutidest ei sobi. Selliste marsruutide abil saab paigutada mingit infot, või statistikat, või veel midagi sarnast. Nagu tavaliste puhul, saab neid kasutada andmete laadimiseks.

Loome faili index.jsx kaustas routes, ja selles komponendi Index:

export default function Index() {
	return (
		<div>
			<p>Tere, React Router!</p>
			<p>See on rakendus minu toodete jaoks :)</p>
		</div>
	);
}

Nüüd liigume faili main.jsx ja impordime sinna oma komponendi Index:

import Index from './routes/index';

Ja esimese elemendina massiivi children lisame objekti, kus omadus index on seatud väärtusele true, ja elemendina kuvatakse meie komponent Index:

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

Võtke rakendus, mille lõite eelmise õppetüki ülesannetes. Kasutades õppetüki materjale, lisage indeksmarsruut pealehe aadressile koos mõne tekstiga.