Індэксны маршрут у React Router

На гэтым уроку мы даведаемся, што такое індэксныя маршруты.

Для пачатку давайце звернем увагу на адну рэч. Калі мы знаходзімся на галоўнай старонцы, то справа мы бачым проста проста пусты экран. Усё таму што ні адзін з даччыных маршрутаў не падыходзіць па адрасе /, а што выводзіць у гэтым выпадку мы не сказалі. У такім выпадку, каб не адлюстроўваць пустую старонку можна ўжыць індэксны маршрут - такі даччыны маршрут, які не мае шляху, і яго элемент адлюстроўваецца ў бацькоўскім Outlet тады, калі не падыходзіць ні адзін з набору даччыных. З дапамогай такіх маршрутаў можна размяшчаць якую-небудзь інфармацыю, ці статыстыку, ці яшчэ што-небудзь падобнае. Як і ў выпадку з звычайнымі іх можна ўжываць для загрузкі даных.

Давайце створым файл index.jsx у папцы routes, а ў ім кампанент 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 /> },

Вазьміце дадатак, створанае вамі ў заданнях да мінулага ўроку. Карыстаючыся матэрыяламі ўроку, дадайце індэксны маршрут з адрасам галоўнай старонкі з якім-небудзь тэкстам.