Indeksroete in React Router

In hierdie les sal ons leer wat indeksroetes is.

Om te begin, laat ons aandag gee aan een ding. Wanneer ons op die hoofblad is, sien ons regs net 'n leër skerm. Dit is omdat nie een van die kindroetes by die adres / pas nie, en ons het nie gesê wat om in hierdie geval uit te voer nie. In so 'n geval, om nie 'n leë bladsy te wys nie, kan ons 'n indeksroete gebruik - so 'n kindroete wat geen pad het nie, en sy element word in die ouer se Outlet vertoon wanneer geen van die stel kindroete pas nie. Sulke roetes kan gebruik word om enige inligting, of statistiek, of iets soortgelyks te plaas. Soos in die geval van gewone roetes, kan hulle gebruik word om data te laai.

Kom ons skep die lêer index.jsx in die gids routes, en daarin die komponent Index:

export default function Index() {
	return (
		<div>
			<p>Hallo, React Router!</p>
			<p>Dit is 'n toepassing vir my produkte :)</p>
		</div>
	);
}

Laat ons nou na main.jsx gaan en ons Index-komponent daar invoer:

import Index from './routes/index';

En as die eerste element in die skikking children voeg ons 'n voorwerp by, waar die eienskap index gestel is op true, en as die element vir vertoning sal ons Index-komponent wees:

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

Neem die toepassing wat jy in die take vir die vorige les geskep het. Gebruik die lesmateriaal, voeg 'n indeksroete by met die hoofbladadres met een of ander teks.