React Routerда индексный маршрут

Бу дарсда биз индексный маршрутлар нима эканини ўрганамиз.

Бошлаш учун бир нарсага эътиборимизни қаратайлик. Биз бош саҳифада бўлганимизда, ўнг томонда жуда бош экранни кўрамиз. Бунинг сабаби, ҳеч қандай ёлғиз маршрут / манзилига мос келмайди, ва бу ҳолатда нима чиқариш кераклигини айтмаганмиз. Бундай ҳолатда, бош саҳифани кўрсатмаслик учун индексный маршрутни қўллаш мумкин - бу ёлғиз маршрут бўлиб, йўли йўқ, ва унинг элементи ота-она Outletда кўрсатилади, агар ёлғиз маршрутларнинг бирортаси мос келмаса. Бундай маршрутлар орқали қандайдир маълумот, ёки статистика, ёки бошқа шунга ўхшаш нарсаларни жойлаштириш мумкин. Оддийлари каби, уларни маълумотларни юклаш учун ишлатиш мумкин.

Келинг routes папкасида index.jsx файлини яратайлик, ва унда Index компонентини яратайлик:

export default function Index() {
	return (
		<div>
			<p>Салом, React Router!</p>
			<p>Бу менинг маҳсулотларим учун илова :)</p>
		</div>
	);
}

Энди main.jsx файлига ўтиб, ўша ерга Index компонентимизни импорт қиламиз:

import Index from './routes/index';

Ва children массивининг биринчи элементига объект қўшамиз, у ерда index хусусияти true қилиб қўйилади, ва кўрсатиладиган элемент сифатида бизнинг Index компонентимиз бўлади:

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

Ўтган дарсдаги вазифаларда яратган иловангизни олинг. Дарс материалларидан фойдаланиб, бош саҳифа учун бирор матн билан индексный маршрут қўшинг.