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 /> },

Алдыңғы сабақтағы тапсырмаларда сіз жасаған қолданбаны алыңыз. Сабақ материалын пайдаланып, басты бетке кейбір мәтінмен индексі маршрут қосыңыз.