Индексен маршрут в React Router

В този урок ще научим какво представляват индексните маршрути.

За начало нека обърнем внимание на едно нещо. Когато сме на началната страница, отдясно виждаме просто празен екран. Това е защото нито един от дъщерните маршрути не отговаря на адреса /, а какво да извеждаме в този случай не сме казали. В такъв случай, за да не показваме празна страница, може да се използва индексен маршрут - такъв дъщерен маршрут, който няма път, и неговият елемент се показва в родителския Outlet тогава, когато не отговаря нито един от набора от дъщерни маршрути. С помощта на такива маршрути може да се поставя някаква информация, или статистика, или още нещо подобно. Както в случая с обикновените, те могат да се използват за зареждане на данни.

Нека създадем файл index.jsx в папката routes, а в него компонент Index:

routes/index.jsxexport default function Index() {
  return (
    <div>
      <p>Здравей, React Router!</p>
      <p>Това е приложение за моите продукти :)</p>
    </div>
  );
}

Сега да преминем към main.jsx и да импортираме там нашия компонент Index:

main.jsximport Index from './routes/index';

А като първи елемент в масива children да добавим обект, където свойството index е зададено като true, а като елемент за показване ще бъде нашият компонент Index:

main.jsx{ index: true, element: <Index /> },